@redneckz/wildless-cms-uni-blocks 0.16.3-credit → 0.16.4-credit

package/mobile/bundle/bundle.umd.js

@@ -145,7 +145,7 @@
     const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isEmbedded = false, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style({ '@container-normal': isEmbedded }, className), defaultPadding: isEmbedded ? '' : 'p-6xl', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: style({ '@container-normal': isEmbedded }, className), defaultPadding: isEmbedded ? '' : 'p-6xl', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-normal', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const DEFAULT_SLOT_NAME = null;
@@ -481,8 +481,12 @@
 
     const useDialogManager = () => useEmitterWithActions(defaultEventBus.emitter, 'dialog');
 
-    const adjustBase = (href, basePath = '') => href?.replace(basePath, '') || '/';
+    const FORWARD_SLASH = '/';
+    const adjustBase = (href = FORWARD_SLASH, basePath = FORWARD_SLASH) => [href, basePath].some((_) => _ === FORWARD_SLASH)
+        ? href
+        : href.replace(basePath, '') || FORWARD_SLASH;
 
+    const RESERVED_PREFIX = ['/api'];
     function useLink() {
         const router = useRouter();
         const { closeAll } = useDialogManager();
@@ -505,7 +509,7 @@
         };
     }
     const isClientRouting = (href, target, basePath) => isLocalURL(href, target) &&
-        !env.SUB_PORTALS?.split(',')?.some(hasPrefix(href)) &&
+        ![...RESERVED_PREFIX, ...(env.SUB_PORTALS?.split(',') ?? [])].some(hasPrefix(href)) &&
         hasPrefix(href)(basePath || '/');
 
     const getAspectsAttributes = (data) => {
@@ -640,7 +644,7 @@
                                     imageAlign,
                                 }), buttons ? jsx("div", { className: "self-end", children: buttons }) : null] })] })] }));
     });
-    const renderMiddleContent = (insetTitle, children) => insetTitle || children ? (jsxs("div", { className: "grow space-y-lg min-w-fit", children: [insetTitle, children] })) : null;
+    const renderMiddleContent = (insetTitle, children) => insetTitle || children ? (jsxs("div", { className: "grow space-y-lg w-fit", children: [insetTitle, children] })) : null;
     const imageAlwaysOnRightContainerStyle = (isImage) => style(isImage ? 'row-span-2' : '@xl:row-span-2');
     const renderUnitContainer = (childrenBlocks) => childrenBlocks?.length ? (jsx("div", { className: "flex items-start justify-end", children: childrenBlocks })) : null;
 
@@ -1065,9 +1069,12 @@
             : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
     };
 
-    const handleAspects = ({ aspectsAttributes, aspects, ev }) => {
+    const handleAspects = async ({ aspectsAttributes, aspects, ev }) => {
         for (const { aspectName, params } of aspectsAttributes ?? []) {
-            aspects[aspectName ?? '']?.(ev, params);
+            const aspectFn = aspects[aspectName ?? ''];
+            if (aspectFn) {
+                await aspectFn(ev, params);
+            }
         }
     };
 
@@ -1110,7 +1117,7 @@
         return url.toString();
     };
 
-    const forwardQuery = (ev) => {
+    const forwardQuery = async (ev) => {
         const anchor = ev.target?.closest('a');
         const navigator = locationNavigator();
         if (isURL(anchor?.href) && !anchor?.href?.startsWith(navigator.origin)) {
@@ -1280,7 +1287,7 @@
 
     const getValidStyle = (valid) => (valid ? inputValidStyle : 'border-error');
 
-    const renderLabel = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
+    const renderLabel$1 = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
 
     const Input = JSX(
     // eslint-disable-next-line max-lines-per-function
@@ -1298,7 +1305,7 @@
         const paddingStyle = children ? 'pr-3xl' : '';
         const validStyle = getValidStyle(valid);
         const ariaLabel = label ?? name ?? id;
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), value: value, name: name || id, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { ref: inputRef, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), id: id, type: type, value: value, name: name || id, placeholder: placeholder, pattern: pattern, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key))] }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel$1(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), value: value, name: name || id, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { ref: inputRef, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), id: id, type: type, value: value, name: name || id, placeholder: placeholder, pattern: pattern, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key))] }), children] }));
     });
     const defaultStyle$1 = 'w-full border rounded-md text-primary-text outline-none p-m';
 
@@ -1395,7 +1402,7 @@
             onClose: handleClose,
             iconVersion,
         });
-        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$2(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$2(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
     });
     const renderIcon$2 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
@@ -1890,7 +1897,7 @@
             value,
         });
         const spaceAbove = useElementSpace(ref, 370);
-        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel(label), jsxs("div", { className: "relative", children: [renderDatePickerForm({
+        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel$1(label), jsxs("div", { className: "relative", children: [renderDatePickerForm({
                             handleChangeVisibleCalendar,
                             value,
                             valid,
@@ -2471,6 +2478,7 @@
         return false;
     })('Укажите дату выдачи паспорта');
     const deliveryDateValidator = (errorMsg) => validator((_) => _?.getTime() >= new Date().getTime())(errorMsg);
+    const notLaterDateValidator = (errorMsg) => validator((_) => _?.getTime() <= new Date().getTime())(errorMsg);
     const numberValidator = (errorMsg) => validator((_) => typeof _ === 'string' && _.length === 6)(errorMsg);
     const serieValidator = (errorMsg) => validator((_) => typeof _ === 'string' && _.length === 4)(errorMsg);
     const snilsValidate = (snils) => {
@@ -2537,7 +2545,7 @@
         lastJobExperience: jobNumberValidator('Укажите стаж на последнем месте работы'),
         experience5Years: jobNumberValidator('Укажите общий стаж за последние 5 лет'),
         jobsNumber: jobNumberValidator('Укажите количество мест работы за последние 5 лет'),
-        beginDate: defaultValidator('Укажите дату заключения трудового договора'),
+        beginDate: notLaterDateValidator('Укажите дату заключения трудового договора'),
         addressFact: addressDaDataValidator(),
         addressRegistration: addressDaDataValidator(),
         addressRetail: defaultSelectValidator('Выберите адрес банка'),
@@ -2564,7 +2572,7 @@
         dulNumber: numberValidator('Укажите номер паспорта'),
         dulSubdivisionCode: numberValidator('Укажите код подразделения'),
         dulIssuedBy: defaultValidator('Укажите организацию, выдавшую паспорт'),
-        participantDateRegistration: defaultValidator('Укажите дату регистрации'),
+        participantDateRegistration: notLaterDateValidator('Укажите дату регистрации'),
         retirementIncome: defaultValidator(),
         otherIncome: defaultValidator(),
         wages: defaultValidator(),
@@ -2629,10 +2637,6 @@
             text: 'Согласие на получение информационных материалов',
             docId: 18,
         },
-        consentPhotoFlg: {
-            text: 'Согласие на фотографирование',
-            docId: 17,
-        },
     };
     const DEBIT_CARD_CONSENTS = {
         processPersonalDataFlg: {
@@ -2671,7 +2675,6 @@
             { name: 'consentInformFlg' },
             { name: 'consentPfrFlg' },
             { name: 'consentInformMaterialsFlg' },
-            { name: 'consentPhotoFlg' },
             { name: 'consentFATCA', required: true },
         ];
         return [
@@ -3517,16 +3520,6 @@
             });
         }
     };
-    const initializeExternalStylesheet = (url = '') => {
-        const link = globalThis.document.getElementById(url);
-        if (!link) {
-            const newLink = globalThis.document.createElement('link');
-            newLink.href = url;
-            newLink.id = url;
-            newLink.rel = 'stylesheet';
-            globalThis.document.head.appendChild(newLink);
-        }
-    };
     function useExternalNS(namespaceName, url, unmountNS = true) {
         const [externalNS, setExternalNS] = useState(undefined);
         useEffect(() => {
@@ -3860,7 +3853,7 @@
 
     const BankruptcyFlgField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u0412 \u043E\u0442\u043D\u043E\u0448\u0435\u043D\u0438\u0438 \u043C\u0435\u043D\u044F \u0432\u0435\u0434\u0451\u0442\u0441\u044F \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0441\u0442\u0432\u043E \u043F\u043E \u0434\u0435\u043B\u0443 \u043E \u0431\u0430\u043D\u043A\u0440\u043E\u0442\u0441\u0442\u0432\u0435", ...field(input?.name ?? '') })));
 
-    const BeginDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0430 \u0442\u0435\u043A\u0443\u0449\u0435\u043C \u043C\u0435\u0441\u0442\u0435", ...field(input?.name ?? ''), ...input, disabled: isEsiaAuthorize(field, input) })));
+    const BeginDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0430 \u0442\u0435\u043A\u0443\u0449\u0435\u043C \u043C\u0435\u0441\u0442\u0435", ...field(input?.name ?? ''), ...input, disabled: isEsiaAuthorize(field, input), maxDate: new Date() })));
 
     const BirthPlaceField = JSX(({ field, input }) => (jsx(DaDataInputControl, { label: "\u041C\u0435\u0441\u0442\u043E \u0440\u043E\u0436\u0434\u0435\u043D\u0438\u044F", ...field(input?.name ?? ''), ...input, disabled: isEsiaAuthorize(field, input) })));
 
@@ -4763,7 +4756,7 @@
 
     const OtherIncomeField = JSX(({ field, input }) => (jsx(DaDataInputControl, { label: "\u0418\u043D\u044B\u0435 \u0434\u043E\u0445\u043E\u0434\u044B", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435", isInteger: true, ...field(input?.name ?? ''), ...input })));
 
-    const ParticipantDateRegistrationField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043F\u043E \u043C\u0435\u0441\u0442\u0443 \u0436\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430", ...field(input?.name ?? '') })));
+    const ParticipantDateRegistrationField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043F\u043E \u043C\u0435\u0441\u0442\u0443 \u0436\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430", ...field(input?.name ?? ''), maxDate: new Date() })));
 
     const MAX_PART = 100;
     const MIN_PART = 0;
@@ -4928,7 +4921,6 @@
         consentInformFlg: ConsentField,
         consentPfrFlg: ConsentField,
         consentInformMaterialsFlg: ConsentField,
-        consentPhotoFlg: ConsentField,
         consentFATCA: ConsentField,
     };
     const InputsRetailMap = {
@@ -5351,7 +5343,7 @@
         };
     };
 
-    const DraftActionButton = JSX(({ title, icon, description, onClick = noop }) => (jsxs("button", { className: "flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green", type: "button", onClick: onClick, children: [jsx(Img, { image: { icon, iconVersion: 'normal' }, width: "78", height: "78" }), jsxs("div", { className: "flex flex-col items-start gap-xs md:w-72 md:mr-lg", children: [jsx(Text, { font: "font-medium", size: "text-s", children: title }), description ? (jsx(Text, { color: "text-secondary-text", size: "text-xs", children: description })) : null] })] })));
+    const DraftActionButton = JSX(({ title, icon, description, onClick = noop }) => (jsxs("button", { className: "flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green", type: "button", onClick: onClick, children: [jsx(Img, { image: { icon, iconVersion: 'normal' }, width: "78", height: "78" }), jsxs("div", { className: "flex flex-col items-start gap-xs md:w-72 md:mr-lg", children: [title ? (jsx(Text, { font: "font-medium", size: "text-s", children: title })) : null, description ? (jsx(Text, { color: "text-secondary-text", size: "text-xs", children: description })) : null] })] })));
 
     const fieldsNamesToContactKeysMap = {
         email: 'EMAIL',
@@ -5882,19 +5874,19 @@
         }
     };
     const transformConsentsFields = (formData, productType) => {
-        const { consentOthersFlg, consentPfrFlg, processPersonalDataFlg, consentInformFlg, consentProviderFlg, consentInformMaterialsFlg, consentPhotoFlg, consentFATCA, } = formData;
+        const { consentOthersFlg, consentPfrFlg, processPersonalDataFlg, consentInformFlg, consentProviderFlg, consentInformMaterialsFlg, consentFATCA, } = formData;
         let consents;
         if (productType === 'credit') {
             consents = {
-                consentPhotoFlg: consentOthersFlg,
                 consentPfrFlg: consentPfrFlg,
                 consentInformMaterialsFlg: consentOthersFlg,
+                consentPhotoFlg: false,
             };
         }
         else if (productType === 'creditCard') {
             consents = {
                 consentInformMaterialsFlg,
-                consentPhotoFlg,
+                consentPhotoFlg: false,
             };
         }
         else {
@@ -7811,7 +7803,9 @@
         const cleanElements = [
             !checkCondition({ condition }, getValue(field)) ? renderTitle(title) : null,
             ...renderInputs({ field, inputs, params }),
-        ].filter(Boolean);
+        ]
+            .filter(Boolean)
+            .map((_, j) => ({ ..._, key: _.key ?? `elem-${j}` }));
         return cleanElements.length ? (jsx("div", { className: style(inputColumnStyles(columns), 'grid gap-x-m'), children: cleanElements }, `section-${i}`)) : null;
     });
     const getValue = (field) => (name) => field(name)?.value;
@@ -9355,65 +9349,18 @@
     });
     const getDataTestIdAttribute = (dataTestId) => dataTestId ? { 'data-test-id': dataTestId } : null;
 
-    const CHAT_NAMESPACE = 'chatbot';
-    const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
-    const CHAT_FRAME_ID = 'webchat-js-container:webchat_rshb';
-    const CHAT_STORAGE_NAME = 'webchat-keep-open';
-    const BUSINESS_CHAT_PREFIX = '/webchat-api';
-    const BUSINESS_CHAT_CLASSNAME = '@container fixed right-0 bottom-0 top-0 h-full w-full z-[100] @3xl:w-auto h-fit';
-    const CHATBOT_URL = {
-        personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
-        business: '/webchat',
-    };
-    const useChatBot = (chat) => {
-        const [isLoading, setIsLoading] = useState(false);
-        useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
-        const chatUrl = CHATBOT_URL[chat ?? ''];
-        const load = useCallback((ev) => {
-            if (!chatUrl) {
-                return;
-            }
-            setIsLoading(true);
-            if (chat === 'business') {
-                renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
-            }
-            else {
-                renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
+    const CHAT_BOT_ASPECT_NAME = 'openChatBot';
+    const HeaderChatBotButton = JSX(({ iconVersion, className, ariaLabel = 'Чат', version, buttonSize = 'large' }) => {
+        const [isLoading, { setTrue: startLoad, setFalse: endLoad }] = useBool(false);
+        const aspects = useAspects();
+        const handleClick = useCallback((ev) => {
+            const openChatBot = aspects[CHAT_BOT_ASPECT_NAME];
+            if (openChatBot) {
+                startLoad();
+                openChatBot(ev).finally(endLoad);
             }
-        }, [chatUrl, chat]);
-        return { load, isLoading };
-    };
-    const renderPersonalChatBot = async (ev, chatUrl) => {
-        const target = ev.target;
-        if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
-            target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
-        }
-        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
-        if (!chatFrame) {
-            await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
-        }
-    };
-    const renderBusinessChatBot = async (chatUrl) => {
-        const businessChat = (await initializeExternalNS(CHAT_NAMESPACE, `${chatUrl}/bundle.js`, true));
-        initializeExternalStylesheet(`${chatUrl}/bundle.css`);
-        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
-        if (chatFrame) {
-            businessChat?.chatOpen?.();
-        }
-        else {
-            createChatFrame();
-            businessChat?.render?.(CHAT_FRAME_ID, true, BUSINESS_CHAT_PREFIX, BUSINESS_CHAT_CLASSNAME);
-        }
-    };
-    const createChatFrame = () => {
-        const chatFrame = globalThis.document.createElement('div');
-        chatFrame.id = CHAT_FRAME_ID;
-        globalThis.document.body.appendChild(chatFrame);
-    };
-
-    const HeaderChatBotButton = JSX(({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version, buttonSize = 'large', }) => {
-        const { load, isLoading } = useChatBot(chat);
-        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'ChatBotIcon', iconVersion }, ariaLabel: ariaLabel, onClick: load, buttonSize: buttonSize, isGrayBg: true, version: version, isLoading: isLoading, dataTestId: "chat icon" }));
+        }, []);
+        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'ChatBotIcon', iconVersion }, ariaLabel: ariaLabel, onClick: handleClick, buttonSize: buttonSize, isGrayBg: true, version: version, isLoading: isLoading, disabled: isLoading, dataTestId: "chat icon" }));
     });
 
     const BUTTON_STYLE = {
@@ -9435,7 +9382,7 @@
         const onClick = useCallback(() => {
             router.back();
         }, [router]);
-        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [alwaysShowLogo || isRootLocation ? (jsx("div", { children: jsx(Logo, { className: "my-2xs", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }) })) : (renderBackButton(onClick, backwardButton)), jsxs("div", { className: "flex gap-lg items-center", children: [projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, buttonSize: "medium" })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] })] }));
+        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [alwaysShowLogo || isRootLocation ? (jsx("div", { children: jsx(Logo, { className: "my-2xs", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }) })) : (renderBackButton(onClick, backwardButton)), jsxs("div", { className: "flex gap-lg items-center", children: [projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, buttonSize: "medium" })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] })] }));
     });
     const renderBackButton = (onClick, text) => text ? (jsxs("button", { className: "flex items-center text-l my-2xs", onClick: onClick, type: "button", "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0437\u0430\u0434", children: [jsx(Icon, { name: "ChevronLeftIcon", iconVersion: "black", width: "24", height: "24" }), text] })) : null;
 
@@ -10144,8 +10091,9 @@
     });
     // TODO: Update handlerDecorator (support buttons?)
     const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
-        const handleClick = useCallback(() => {
-            onClick && onClick(item);
+        const handleClick = useCallback((e) => {
+            e.target.scrollIntoView({ block: 'nearest' });
+            onClick?.(item);
         }, [onClick, item]);
         return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
     });
@@ -10271,96 +10219,36 @@
         ? Number(paramsId)
         : tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
 
-    const useCarouselControls = (props, initialIndex = 0) => {
-        const { itemCount, visibleItemCount } = props;
-        const [activeIndex, setActiveIndex] = useState(initialIndex);
-        const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
-        const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
-        const canInc = visibleItemCount
-            ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
-            : activeIndex < itemCount - 1;
-        const canDec = activeIndex > 0;
-        const isScrollAvailable = canDec || canInc;
-        return [
-            activeIndex,
-            {
-                inc,
-                dec,
-                canInc,
-                canDec,
-                isScrollAvailable,
-            },
-        ];
-    };
-
-    const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
-    const firstCellStyle = 'w-80 flex-shrink-0';
-    const COLS_LENGTH_FOR_SCROLL = 2;
-    const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
+    const FIRST_CELL_STYLES = 'w-80 flex-shrink-0 sticky left-0 bg-white';
+    const renderHeader = ({ title, icon }) => (jsxs("div", { className: style('flex gap-m items-center', FIRST_CELL_STYLES), role: "cell", children: [icon ? (jsx(Img, { className: "hidden lg:block max-w-6 shrink-0", image: icon, width: "24", height: "24" })) : null, title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null] }));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-m duration-1000',
         tariff: 'flex gap-5xl flex-grow duration-1000',
     };
-    const TableCarouselContainer = JSX(({ children, activeIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeIndex * columnWidth}px)` }, children: children }) })));
+    const TableCarouselContainer = JSX(({ children, version = 'comparison' }) => (jsx("div", { className: "flex flex-1", children: jsx("div", { className: carouselContainerClassesMap[version], children: children }) })));
 
     const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(DefaultFoldButton, { className: className, label: isOpen ? 'Скрыть' : 'Показать', isUnfolded: isOpen, version: "secondary", short: true, onClick: onClick })));
 
-    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
-        buttonClassName: 'basis-0',
-    });
-    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { className: "space-y-2xs", children: [label ? (jsx("div", { children: jsx(Text, { size: "text-h6", children: label }) })) : null, description ? (jsx("div", { className: "lg:text-l font-light text-xs", children: jsx(Text, { color: "text-secondary-text", children: description }) })) : null] }));
-    const renderImgCellData = ({ image }) => (image?.src ? jsx(Img, { image: image }) : null);
-    const renderRichTextCellData = ({ __html, isDotted = true }) => (jsx("div", { className: "flex flex-col justify-between items-start text-h6", children: jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-m" }) }));
-    const renderInnerTableCellData = ({ isVisible, displayTable, tableSource, pdfUrl, isOpen, }) => isVisible ? (jsx(TableInnerButton, { className: "w-fit", isOpen: isOpen, onClick: () => {
-            displayTable({ tableSource, pdfUrl });
-        } })) : null;
-    const EmbeddableCellData = {
-        Buttons: renderButtonsCellData,
-        Img: renderImgCellData,
-        RichText: renderRichTextCellData,
-        LabelDescription: renderLabelDescriptionCellData,
-        Table: renderInnerTableCellData,
-    };
-
-    const RenderCellInner = JSX(({ cell, fieldIdx, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => {
-        const [isVisible, setVisibility] = useState(true);
-        useEffect(() => {
-            if (cellIdx !== openTableInnerIdx || !tableInner) {
-                setVisibility(true);
-            }
-        }, [tableInner, openTableInnerIdx]);
-        const displayTable = (props) => {
-            setVisibility(false);
-            setOpenTableInnerIdx(cellIdx);
-            setTableInner(props);
-        };
-        return renderCell({
-            cell,
-            cellProps: {
-                rowIdx,
-                cellIdx,
-                fieldIdx,
-                displayTable,
-                isVisible,
-            },
-        });
-    });
-    const renderCell = ({ cell, cellProps }) => {
-        if (!cell) {
-            return null;
-        }
-        const { tableCellType: type, ...rest } = cell;
-        if (!type || !(type in EmbeddableCellData)) {
-            return null;
-        }
-        const EmbeddableCellInner = EmbeddableCellData[type];
-        return jsx(EmbeddableCellInner, { ...cellProps, ...rest });
-    };
-
-    const TariffsTableCell = JSX(({ cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => (jsx("div", { className: "w-80 flex-grow flex flex-col gap-m @4xl:gap-lg", role: "cell", children: cells?.length
-            ? cells.map((_, i) => (jsx(RenderCellInner, { cell: _, fieldIdx: i, rowIdx: rowIdx, cellIdx: cellIdx, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i))))
-            : null })));
+    const renderCell = ({ label, description, __html, isDotted, buttons, image }, i) => (jsxs("div", { className: "grid gap-xs", children: [renderLabel(label), renderDescription$1(description), renderRich({ __html, isDotted }), renderButtonsSection(buttons, {
+                buttonClassName: 'basis-0',
+            }), image?.src ? jsx(Img, { image: image }) : null] }, String(i)));
+    const renderLabel = (label) => label ? (jsx("div", { children: jsx(Text, { size: "text-h6", children: label }) })) : null;
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "text-l font-light", children: jsx(Text, { color: "text-secondary-text", children: description }) })) : null;
+    const renderRich = ({ __html, isDotted }) => __html ? (jsx("div", { className: "flex flex-col justify-between items-start text-h6", children: jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-m" }) })) : null;
+
+    const TariffsTableCell = JSX(({ cells, tableInner, onSetTable }) => {
+        return (jsx("div", { className: "w-80 flex-grow flex flex-col gap-lg", role: "cell", children: cells?.length
+                ? cells.map((_, i) => {
+                    if (_?.tableSource?.tableData) {
+                        return (jsx(TableInnerButton, { className: "w-fit", isOpen: Boolean(tableInner), onClick: () => {
+                                onSetTable(tableInner ? undefined : { tableSource: _.tableSource });
+                            } }, String(i)));
+                    }
+                    return renderCell(_, i);
+                })
+                : null }));
+    });
 
     const sum = (list = []) => list.reduce((a, b) => a + b, 0);
 
@@ -10373,7 +10261,7 @@
         }
         const [headerColumn, ...columns] = rowData;
         const columnsStyle = style('flex duration-1000 text-center', rowIdx !== 0 ? 'font-normal' : 'font-light');
-        return (jsxs("div", { className: "flex border-main-divider border-b border-solid h-full", children: [headerColumn?.data ? (jsx("div", { className: "whitespace-pre-wrap sm:whitespace-normal w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0", children: jsx(Text, { size: "text-xl", font: "font-light", children: headerColumn.data }) })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsStyle, style: {
+        return (jsxs("div", { className: "flex border-main-divider border-b border-solid h-full", children: [headerColumn?.data ? (jsx("div", { className: "whitespace-pre-wrap sm:whitespace-normal w-48 min-w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0", children: jsx(Text, { size: "text-xl", font: "font-light", children: headerColumn.data }) })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsStyle, style: {
                             transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
                         }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx(Text, { size: "text-xl", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
     };
@@ -10381,12 +10269,10 @@
 
     const InnerTableBodyItem = JSX(({ rows }) => (jsx(SwipeListContainer, { visibleItemCount: 0, snapAlign: "snap-start", children: jsx("div", { children: rows?.map(renderInnerTableRow(0)) }) })));
 
-    const InnerTableBody = JSX(({ activeTabIndex, items }) => {
-        return (jsx("div", { children: items.map((_, tableIdx) => {
-                const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full @container", children: [jsx("div", { className: "flex py-m sm:px-m bg-white @4xl:bg-gray relative", children: jsx(Text, { size: "text-xl", align: "text-left", children: _.title }) }), jsx("div", { className: "w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out", children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
-            }) }));
-    });
+    const InnerTableBody = JSX(({ activeTabIndex, items }) => (jsx("div", { children: items.map((_, tableIdx) => {
+            const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
+            return (jsxs("div", { className: "w-full @container", children: [jsx("div", { className: "flex py-m px-m bg-white @4xl:bg-gray relative", children: jsx(Text, { size: "text-xl", align: "text-left", children: _.title }) }), jsx("div", { className: "w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out", children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+        }) })));
 
     const linkButtonVersion = 'link';
 
@@ -10396,53 +10282,38 @@
                     }), onClick: () => setActiveTabIndex(idx), children: jsx(Text, { size: "text-xl", font: "font-light", color: TableColor(idx === activeTabIndex), children: currency || idx + 1 }) }, currency))) })) : null, linkToPDF ? (jsx(LinkButton, { className: "text-primary-main", href: linkToPDF, version: linkButtonVersion, target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     const EMPTY_DATA$1 = 'Данных нет';
-    const InnerTable = UniBlock(({ tableSource, pdfUrl, onClick }) => {
+    const InnerTable = UniBlock(({ tableSource }) => {
         const tableData = tableSource?.tableData;
         const [activeTabIndex, setActiveTabIndex] = useState(0);
         const handleActiveTabIndex = useCallback((_) => setActiveTabIndex(_), []);
         const items = tableData?.[activeTabIndex]?.items ?? [];
         const currencies = tableData?.map((item) => item.currency ?? '');
-        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { className: "mt-xl", onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-lg space-y-m text-center", children: [jsx(Text, { size: "text-h6", children: EMPTY_DATA$1 }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
+        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items })] })) : (jsx("div", { className: "space-y-m text-center", children: jsx(Text, { size: "text-h6", children: EMPTY_DATA$1 }) }));
     });
 
-    const TariffsTableRowContainer = JSX(({ children, tableInner, onHideContentClick }) => (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: style(dividerStyle, 'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg'), children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onHideContentClick }) })) : null] })));
+    const DIVIDER_STYLE = 'border-main-divider lg:border-b w-full py-s lg:py-xl';
+    const TariffsTableRowContainer = JSX(({ children, tableInner, onClick }) => (jsxs("div", { className: style('self-start flex flex-col gap-xl', DIVIDER_STYLE), role: "row", children: [jsx("div", { className: style('flex flex-col lg:flex-row gap-x-5xl gap-y-xs'), children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onClick }) })) : null] })));
 
-    const TariffsTableRow = JSX(({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
+    const TariffsTableRow = JSX(({ row: { header, data = [] }, ...rest }) => {
         const [tableInner, setTableInner] = useState(undefined);
-        const handleSetTableInner = useCallback((_) => setTableInner(_), []);
-        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: style('text-s', firstCellStyle), children: jsxs("div", { className: "flex gap-m items-center", role: "cell", children: [header?.icon ? (jsx(Img, { className: "hidden @4xl:block max-w-6 shrink-0", image: header.icon, width: "24", height: "24" })) : null, header?.title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", 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 handleSetTableInner = useCallback((_) => {
+            setTableInner(_);
+        }, []);
+        return (jsxs(TariffsTableRowContainer, { tableInner: tableInner, ...rest, children: [renderHeader(header), data?.length ? (jsx(TableCarouselContainer, { version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, onSetTable: handleSetTableInner, tableInner: tableInner, ...rest }, String(i)))) })) : null] }));
     });
 
-    /** @deprecated */
-    const renderArrows = ({ className, btnClass, canDec, canInc, dec, inc, }) => canDec || canInc ? (jsxs("div", { children: [canDec ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('absolute z-40', btnClass[0], className), onClick: dec })) : null, canInc ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('absolute z-40', btnClass[1], className), onClick: inc })) : null] })) : null;
-
-    const TariffsTableWrapper = JSX(({ children, controls }) => {
-        const { isScrollAvailable } = controls;
-        return (jsxs("div", { role: "table", className: "overflow-x-auto w-auto grid md:block", children: [jsxs("div", { className: "relative space-y-xs", children: [children, renderArrows({
-                            ...controls,
-                            btnClass: ['top-28', 'top-11'],
-                            className: 'right-7',
-                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
-    });
+    const TariffsTableWrapper = JSX(({ children }) => (jsx("div", { role: "table", className: "overflow-x-auto w-auto grid relative gap-y-xs", children: children })));
 
-    const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
+    const TariffsTable = UniBlock(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
         const colData = columns?.map(({ data }) => data) || [];
         const rowData = rowHeaders?.map((header, i) => ({
             header,
             data: colData.map((col) => col?.[i] || []),
         }));
-        const itemCount = colData.length;
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: itemCount,
-            visibleItemCount: COLS_LENGTH_FOR_SCROLL,
-        });
-        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
+        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
         const [isUnfolded, { toggle }] = useBool(false);
-        return (jsxs(BlockWrapper, { className: style('relative space-y-6xl @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "text-h4", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
+        return (jsxs(BlockWrapper, { className: style('relative space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "text-h4", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { children: rows })) })] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, __html, richVersion, ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-s sm:gap-m group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? renderIcon() : null, jsxs("div", { className: "flex flex-col w-fit gap-2xs sm:gap-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-normal", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, __html ? jsx(RichText, { richVersion: richVersion, __html: __html }) : null] })] })));
@@ -10611,7 +10482,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.844";
+    const packageVersion = "0.14.856";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;