@redneckz/wildless-cms-uni-blocks 0.10.2 → 0.10.3

package/bundle/bundle.umd.js

@@ -693,10 +693,10 @@
         black: 'text-black',
         white: 'text-black',
     };
-    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', ...imgProps }) => {
         const router = useRouter();
         const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
-        if (asSVG && iconVersion !== 'normal') {
+        if (iconVersion !== 'normal') {
             return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
         }
         if (!className.includes('h-')) {
@@ -1193,7 +1193,7 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
     };
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
@@ -1215,7 +1215,7 @@
         return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     const DEFAULT_ICON_W = 24;
-    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(ImgInner, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W), asSVG: true })) : null;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(ImgInner, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
 
     const headlineVersionStyles = {
         XXL: {
@@ -1306,11 +1306,11 @@
 
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
-        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { image: image, asSVG: true }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
+        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { image: image }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
     });
     const renderItem = (item, key) => {
         const { icon, text } = item;
-        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider", asSVG: true })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
+        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
@@ -1342,7 +1342,7 @@
 
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16", asSVG: true }) })));
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
     const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
     const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
@@ -1522,7 +1522,7 @@
         return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => callback && callback(text === EVERY_MONTH) }) })] }));
     }
 
-    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(ImgInner, { image: { icon: 'PercentIcon' }, width: "90", height: "85", asSVG: true }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
+    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
 
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -1547,9 +1547,15 @@
 
     const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
 
+    const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
+        ? {
+            [minKey]: limitParams[minKey],
+            [maxKey]: limitParams[maxKey],
+        }
+        : getRangeByKeys([minKey, maxKey], rateRows);
     const getRangeByKeys = ([minKey, maxKey], rows = []) => ({
-        [minKey]: rows.length ? minBy()(rows.map((row) => row[minKey])) : 0,
-        [maxKey]: rows.length ? maxBy()(rows.map((row) => row[maxKey])) : 0,
+        [minKey]: rows.length ? minBy()(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
+        [maxKey]: rows.length ? maxBy()(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
     });
     const checkRangeByKeys = (value, [minKey, maxKey], sourceBookRow) => value >= sourceBookRow[minKey] && value <= sourceBookRow[maxKey];
 
@@ -1566,7 +1572,7 @@
                 isShowUnknownRate: true,
             };
         }
-        const businessDepositCalculatorSourceBookParams = data?.rows?.find((_) => {
+        const businessDepositCalculatorSourceBookParams = data?.rateRows?.find((_) => {
             return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
                 isSmallBusiness === _.isSmallBusiness &&
                 checkIsOperatingDeposit(isOperatingDeposit, _) &&
@@ -1576,7 +1582,7 @@
         const { rate } = businessDepositCalculatorSourceBookParams;
         const income = getDepositIncome$1(rate, userInputParams);
         const finalSum = moneyValue + income;
-        const sourceBookRows = data?.rows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
+        const sourceBookRows = data?.rateRows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
         return {
             ...businessDepositCalculatorSourceBookParams,
             ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
@@ -1721,48 +1727,53 @@
     const useCreditCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
-        const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
-        const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
-        const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
-        const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
-        const creditCalculatorSourceBookParams = data?.rows?.find((row) => checkRowByParam$1({
+        const creditCalculatorSourceBookLimitParams = data?.limitRows?.find((row) => checkRowCommonParams({
+            row,
+            userInputParams,
+            paramsViewSettings,
+        }));
+        const creditCalculatorSourceBookRateParams = data?.rateRows?.find((row) => checkRowCommonParams({
             row,
             userInputParams,
-            paramKey: 'isSalaryClient',
-            isExclude: isExcludeSalaryClient,
+            paramsViewSettings,
         }) &&
-            checkRowByParam$1({
-                row,
-                userInputParams,
-                paramKey: 'isStateEmployee',
-                isExclude: isExcludeStateEmployee,
-            }) &&
-            checkRowByParam$1({
-                row,
-                userInputParams,
-                paramKey: 'isPensionClient',
-                isExclude: isExcludePensionClient,
-            }) &&
-            checkRowByParam$1({
-                row,
-                userInputParams,
-                paramKey: 'isInsurance',
-                isExclude: isExcludeInsurance,
-            }) &&
             checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
             checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
-        const { rate } = creditCalculatorSourceBookParams;
+        const { rate } = creditCalculatorSourceBookRateParams;
         const monthlyPayment = getMonthlyPayment(rate, userInputParams);
-        const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
-        return {
-            ...creditCalculatorSourceBookParams,
-            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
-            ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+        const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
+        return useMemo(() => ({
+            ...creditCalculatorSourceBookRateParams,
+            ...getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows),
+            ...getLimitRangeByKeys(['minMonths', 'maxMonths'], creditCalculatorSourceBookLimitParams, rateRows),
             ...userInputParams,
             monthlyPayment,
-        };
+        }), [userInputParams]);
+    };
+    const checkRowCommonParams = (props) => checkRowParam({
+        ...props,
+        fieldKey: 'isSalaryClient',
+        viewSettingFieldKey: 'isShowSalaryClient',
+    }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isStateEmployee',
+            viewSettingFieldKey: 'isShowStateEmployee',
+        }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isPensionClient',
+            viewSettingFieldKey: 'isShowPensionClient',
+        }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isInsurance',
+            viewSettingFieldKey: 'isShowInsurance',
+        });
+    const checkRowParam = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
+        const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+        return isExclude || userInputParams[fieldKey] === row[fieldKey];
     };
-    const checkRowByParam$1 = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
 
     const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [isAnnuity, toggleIsAnnuity] = useState(false);
@@ -1788,6 +1799,10 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        useEffect(() => {
+            setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
+            setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
+        }, [calculatorParams]);
         return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsx("div", { className: "mt-7", children: renderCreditParamsForm({
                                 ...calculatorParams,
                                 ...paramsViewSettings,
@@ -1825,12 +1840,12 @@
     const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const defaultMonth = data?.rows[0]
-            ? getMiddleMonth(data.rows[0].minMonths, data.rows[0].maxMonths)
+        const defaultMonth = data?.rateRows[0]
+            ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
             : 1;
         const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
         const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
-        const depositCalculatorSourceBookParams = data?.rows?.find((row) => checkRowByParam({
+        const depositCalculatorSourceBookParams = data?.rateRows?.find((row) => checkRowByParam({
             row,
             userInputParams,
             paramKey: 'isMonthlyInterestPayment',
@@ -1847,7 +1862,7 @@
         const { rate } = depositCalculatorSourceBookParams;
         const income = getDepositIncome(rate, userInputParams);
         const finalSum = moneyValue + income;
-        const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
+        const sourceBookRows = data?.rateRows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
         return {
             ...depositCalculatorSourceBookParams,
             ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
@@ -1968,7 +1983,7 @@
       ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
                         ...tab?.icon,
                         iconVersion: iconVersion ?? activeIconStyle,
-                    }, 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)));
+                    }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
@@ -2355,7 +2370,7 @@
     });
 
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (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] })] })));
@@ -2387,7 +2402,7 @@
     const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
         const link = useLink();
         const adjustedProps = link({ href, target });
-        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
+        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24" }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
     });
 
     const MAX_LINKS_COUNT = 10;
@@ -2426,14 +2441,14 @@
                     isVertical: isFullWidth ? true : false,
                 })] }));
     });
-    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image, asSVG: true })) : null] }));
+    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
     });
     const renderList$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
@@ -2480,7 +2495,7 @@
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
         const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(ImgInner, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(ImgInner, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
@@ -2490,7 +2505,7 @@
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
         return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
-    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
@@ -2528,14 +2543,14 @@
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
         return (jsxs(BlockWrapper, { className: style('relative border border-gray p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null] }));
+    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
     const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-    const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
+    const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
     const renderCardInfo = (cell, i) => {
         const { title, description, buttons } = cell;
         return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
     };
-    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
+    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const BORDER_CLASSES = 'border-gray border-solid border';
@@ -2544,7 +2559,7 @@
     const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -2690,7 +2705,7 @@
         return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
     };
 
-    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24" }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -2862,7 +2877,7 @@
                 : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
                         icon,
                         iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
     });
     const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
         const labels = ['Развернуть', 'Скрыть'];
@@ -2946,10 +2961,10 @@
         transparent: 'text-white',
     };
     const renderImage$2 = (bgColor, image, size) => {
-        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/", asSVG: true })) : (jsx(ImgInner, { image: {
+        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/" })) : (jsx(ImgInner, { image: {
                 icon: image?.icon || 'LogoIcon',
                 iconVersion: ICON_VERSION_MAP[bgColor],
-            }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true }));
+            }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height }));
     };
 
     const TEXT_COLOR = {
@@ -3433,9 +3448,63 @@
         ? 'text-primary-main'
         : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
-    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, disabled, ariaLabel, image, onClick }) => (jsx("button", { className: style('group/btn border-0 p-0 flex items-center bg-inherit', isRounded
+    const BUTTON_SIZE_STYLE = {
+        default: 'w-6 h-6',
+        large: 'w-12 h-12',
+    };
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
             ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-            : 'w-6 h-6 text-primary-text hover:text-primary-main', 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, children: jsx(ImgInner, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0", asSVG: true }) })));
+            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, children: jsx(ImgInner, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
+
+    const HeaderSecondaryMenu = JSX(({ className, version, locationName: location, officesLink }) => {
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
+        const { open: openLocationModal } = useDialog(LOCATION_DIALOG_ID);
+        const handleOpenLocationModal = useCallback(() => openLocationModal(), []);
+        const { open: openSearchModal } = useDialog(SEARCH_DIALOG_ID);
+        const handleOpenSearchModal = useCallback(() => openSearchModal(), []);
+        return (jsxs("div", { className: style('flex items-center gap-5', className), children: [jsx(TopItem, { flat: true, href: "#", text: location, onClick: handleOpenLocationModal }), officesLink ? jsx(TopItem, { flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A", onClick: handleOpenSearchModal })] }));
+    });
+
+    const findActiveSubItem = (router) => (items = []) => {
+        const possibleActiveSubItems = items?.filter(isHrefActive(router));
+        return possibleActiveSubItems?.length
+            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
+            : undefined;
+    };
+
+    const DropdownMenu = JSX(({ className = '', items, activeItem }) => {
+        const link = useLink();
+        const [visible, setVisible] = useState(false);
+        const handleToggle = useCallback(() => setVisible((_) => !_), []);
+        const handleClickOutside = useCallback(() => setVisible(false), []);
+        const ref = useOutsideClick(handleClickOutside);
+        return (jsxs("div", { className: style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, children: [jsx("button", { className: "group/btn flex justify-between items-center h-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3)
+                        .fill(null)
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('absolute flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden'), "aria-hidden": !visible, children: items?.map((item, i) => {
+                        const { text, ...linkProps } = item;
+                        return (jsx("a", { className: style('text-l-light pb-4 hover:text-primary-main', item === activeItem ? 'text-primary-main' : ''), ...link(linkProps), children: text }, item.href || String(i)));
+                    }) })] }));
+    });
+
+    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
+        const link = useLink();
+        const { href, target, text, onClick } = link(rest);
+        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
+    });
+    const getTextStyle = (active = false) => style('font-sans text-l-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+
+    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+        const observerCallback = useCallback((entries) => {
+            if (!entries.length || !onVisibilityChange) {
+                return;
+            }
+            // Assumption about entries order (by time)
+            const entry = entries[entries.length - 1];
+            onVisibilityChange(entry.isIntersecting);
+        }, [onVisibilityChange]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("span", { ref: ref, className: className, children: jsx(HeaderItem, { ...rest, children: children }) }));
+    });
 
     const getNS = (_) => globalThis[_];
     function useExternalNS(namespaceName, url) {
@@ -3490,59 +3559,16 @@
         useChatBot(chat);
         return renderChatBotButton(rest);
     });
-    const renderChatBotButton = ({ className, iconVersion, onClick }) => (jsx(HeaderSecondaryMenuButton, { className: style(CHAT_BUTTON_EXTERNAL_NAME, className), image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: onClick }));
+    const renderChatBotButton = ({ className, iconVersion, onClick }) => (jsx(HeaderSecondaryMenuButton, { className: style(CHAT_BUTTON_EXTERNAL_NAME, className), image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: onClick, buttonSize: "large", isGrayBg: true }));
 
-    const HeaderSecondaryMenu = JSX(({ className, version, locationName: location, officesLink }) => {
-        const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const { open: openLocationModal } = useDialog(LOCATION_DIALOG_ID);
-        const handleOpenLocationModal = useCallback(() => openLocationModal(), []);
-        const { open: openSearchModal } = useDialog(SEARCH_DIALOG_ID);
-        const handleOpenSearchModal = useCallback(() => openSearchModal(), []);
-        return (jsxs("div", { className: style('flex items-center gap-5', className), children: [jsx(TopItem, { flat: true, href: "#", text: location, onClick: handleOpenLocationModal }), officesLink ? jsx(TopItem, { flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A", onClick: handleOpenSearchModal }), projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null] }));
-    });
-
-    const findActiveSubItem = (router) => (items = []) => {
-        const possibleActiveSubItems = items?.filter(isHrefActive(router));
-        return possibleActiveSubItems?.length
-            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-            : undefined;
+    const BUTTON_STYLE = {
+        default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+        transparent: 'text-white hover:text-primary-hover',
     };
+    const InternetBankButton = JSX(({ version, internetBankUrl }) => (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0418\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u0431\u0430\u043D\u043A", target: "_blank", className: style('py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0418\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u0431\u0430\u043D\u043A" })));
 
-    const DropdownMenu = JSX(({ className = '', items, activeItem }) => {
-        const link = useLink();
-        const [visible, setVisible] = useState(false);
-        const handleToggle = useCallback(() => setVisible((_) => !_), []);
-        const handleClickOutside = useCallback(() => setVisible(false), []);
-        const ref = useOutsideClick(handleClickOutside);
-        return (jsxs("div", { className: style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, children: [jsx("button", { className: "group/btn flex justify-between items-center h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3)
-                        .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden'), "aria-hidden": !visible, children: items?.map((item, i) => {
-                        const { text, ...linkProps } = item;
-                        return (jsx("a", { className: style('text-l-light pb-4 hover:text-primary-main', item === activeItem ? 'text-primary-main' : ''), ...link(linkProps), children: text }, item.href || String(i)));
-                    }) })] }));
-    });
-
-    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
-        const link = useLink();
-        const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
-    });
-    const getTextStyle = (active = false) => style('font-sans text-l-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
-
-    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, ...rest }) => {
-        const observerCallback = useCallback((entries) => {
-            if (!entries.length || !onVisibilityChange) {
-                return;
-            }
-            // Assumption about entries order (by time)
-            const entry = entries[entries.length - 1];
-            onVisibilityChange(entry.isIntersecting);
-        }, [onVisibilityChange]);
-        const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("span", { ref: ref, children: jsx(HeaderItem, { ...rest, children: children }) }));
-    });
-
-    const HeaderSubMenu = JSX(({ subItems = [] }) => {
+    const HeaderSubMenu = JSX(({ subItems = [], version, internetBankUrl }) => {
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
         const router = useRouter();
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
@@ -3554,7 +3580,7 @@
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
         }), [subItems]);
-        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: style('mr-8', visibleItemsCount - 1 < i ? 'invisible' : ''), active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "absolute w-52 -top-4 right-0 pt-4 z-40", items: dropDownMenuItems, activeItem: activeSubItem })) : null] }));
+        return (jsxs("nav", { className: "relative mt-3 flex items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-3 mt-2", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : ''), active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "ml-9", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, jsx(InternetBankButton, { version: version, internetBankUrl: internetBankUrl })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -3565,10 +3591,10 @@
     };
     const Header = JSX(({ bgColor = 'bg-white', className, showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
         const router = useRouter();
-        const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
+        const { topItems, logo, defaultLocation, foreignOffices, officesLink, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = topItems?.find(isTopItemActive(router));
         const [location, onChangeLocation] = useLocation(defaultLocation);
-        return (jsxs(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: [jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
+        return (jsxs(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: [jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankUrl: internetBankUrl })) : null] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
     });
 
     const gapStyles = {
@@ -3581,7 +3607,7 @@
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
@@ -3730,7 +3756,7 @@
         double: 'flex-wrap',
         single: 'flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24", asSVG: true })) : null }) }, String(i)))) })) : null] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
@@ -3859,7 +3885,7 @@
                 updatePointsToRender(null);
             }
         };
-        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-3 pl-11 pr-4 w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", asSVG: true, className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
+        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-3 pl-11 pr-4 w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
     };
 
     const styles$1 = {
@@ -3995,7 +4021,7 @@
         const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
         return status ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4", children: workTime ? workTime : null }), jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden", children: lunchHour ? lunchHourText : null })] })) : (jsx("div", { className: "flex", children: jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }) }));
     };
-    const renderNearbyOffice = ({ icon, title, distance, time }, index) => (jsxs("div", { className: "flex mr-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", asSVG: true, className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
+    const renderNearbyOffice = ({ icon, title, distance, time }, index) => (jsxs("div", { className: "flex mr-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
     const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m-light text-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }), status && workTime ? jsx("div", { children: workTime }) : null] }), status && lunchHour ? renderLunchHour(lunchHour) : null, description ? (jsx("div", { className: "pb-1 text-s-light text-secondary-text", children: description })) : null] }, `day${inx}`));
     const renderLunchHour = (lunchHour) => {
         const hasTime = /\d+/gi.test(lunchHour);
@@ -4128,18 +4154,18 @@
         ];
         const currentWeekDayInd = new Date().getDay();
         const currentWeekDay = currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
-        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", asSVG: true, className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
+        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
     });
 
     const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
     });
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -4239,7 +4265,7 @@
         const { text, href, target } = button;
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }, asSVG: true }) }), text ? (jsx(Button, { version: "link", text: text, href: href, target: target, ariaLabel: text })) : null] }));
+        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion } }) }), text ? (jsx(Button, { version: "link", text: text, href: href, target: target, ariaLabel: text })) : null] }));
     }
 
     const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
@@ -4355,7 +4381,7 @@
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(ImgInner, { image: { icon }, width: "24", height: "24", asSVG: true }) : null] }));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(Icon, { name: icon, width: "24", height: "24" }) : null] }));
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -4407,7 +4433,7 @@
 
     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(ImgInner, { 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"] })] })] }));
+        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(ImgInner, { image: { icon: 'PackA4Icon' }, width: "290", height: "257" }), 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("div", { className: "text-m-light text-secondary-text mb-1", children: label }), jsx("span", { className: "text-h3 text-primary-text", children: total })] }));
@@ -4528,7 +4554,7 @@
         const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
         const stepVersionIconTextStyles = stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
         const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
-        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
+        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48" })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
     };
 
     const DEFAULT_GAP = 14;
@@ -4724,7 +4750,7 @@
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
     const TableInnerButton = JSX(({ isOpen, onClick }) => {
-        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
+        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20" })] }));
     });
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons);
@@ -4832,7 +4858,7 @@
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     function useTariffsInnerTableData(directoryName) {
         const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
@@ -4864,7 +4890,7 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -4924,7 +4950,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock$1(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -4944,9 +4970,9 @@
                             className: 'mb-6',
                         })
                         : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null] }));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
     const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
 
     const Blocks = {
         ApplicationForm,
@@ -5136,7 +5162,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.10.2";
+    const packageVersion = "0.10.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;