@alfalab/core-components 23.13.0 → 25.1.0

package/confirmation/components/{overlimit → screens/temp-block}/index.css

@@ -1,7 +1,4 @@
-/* hash: 12an0 */
-:root {
-    --color-static-status-red: #d91d0b;
-}
+/* hash: ph3b5 */
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -15,11 +12,9 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
-    --gap-3xl: 40px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -45,46 +40,29 @@
 
     /* input */
 }
-.confirmation__component_1iqq7 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.confirmation__title_1iqq7 {
+.confirmation__header_1vxjv {
+    margin: 0;
+    margin-bottom: var(--gap-xl);
     font-size: var(--confirmation-title-font-size);
     line-height: var(--confirmation-title-line-height);
     font-weight: var(--confirmation-title-font-weight);
     font-family: var(--confirmation-title-font-family);
     color: var(--confirmation-title-color);
     font-feature-settings: var(--confirmation-title-font-feature-settings);
-
-    margin-bottom: var(--gap-3xl);
 }
-.confirmation__description_1iqq7 {
+.confirmation__description_1vxjv {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
+
+    margin-bottom: var(--gap-2xl);
 }
-.confirmation__countdown_1iqq7 {
+.confirmation__countdownWrap_1vxjv {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: var(--gap-2xs);
 }
-.confirmation__loader_1iqq7 {
+.confirmation__loader_1vxjv {
     margin-right: var(--gap-xs);
 }
-.confirmation__timePassed_1iqq7 {
-    display: flex;
-    min-width: 3em;
-}
-.confirmation__getCodeButton_1iqq7 {
-    margin-top: var(--gap-2xl);
-}
-.confirmation__alertIcon_1iqq7 {
-    text-align: center;
-    margin-bottom: var(--gap-xl);
-    color: var(--color-static-status-red);
-}

package/confirmation/components/screens/temp-block/index.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../../../utils.js');
+require('../../../context.js');
+require('../../countdown-loader/component.js');
+var components_screens_tempBlock_component = require('./component.js');
+
+
+
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

package/confirmation/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TConfirmationContext } from "./types";
+declare const ConfirmationContext: import("react").Context<TConfirmationContext>;
+export { ConfirmationContext };

package/confirmation/context.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('./utils.js');
+
+var mockFn = function () { return undefined; };
+var ConfirmationContext = React.createContext({
+    alignContent: 'left',
+    texts: {},
+    state: 'INITIAL',
+    screen: 'INITIAL',
+    requiredCharAmount: 5,
+    countdownDuration: utils.ONE_MINUTE,
+    timeLeft: utils.ONE_MINUTE,
+    tempBlockDuration: utils.ONE_DAY,
+    phone: '',
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});
+
+exports.ConfirmationContext = ConfirmationContext;

package/confirmation/countdown-section-c9f1f932.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type CountdownSectionProps = {
+    codeSendHintVisible: boolean;
+    timePassed: boolean;
+    processing: boolean;
+    handleSmsRetryClick: () => void;
+};
+declare const CountdownSection: FC<CountdownSectionProps>;
+export { CountdownSection };

package/confirmation/countdown-section-c9f1f932.js

@@ -0,0 +1,39 @@
+var React = require('react');
+var cn = require('classnames');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var coreComponentsLoader = require('../loader');
+var coreComponentsButton = require('../button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"confirmation__component_19e8h","header":"confirmation__header_19e8h","phone":"confirmation__phone_19e8h","inputContainer":"confirmation__inputContainer_19e8h","compact":"confirmation__compact_19e8h","loaderWrap":"confirmation__loaderWrap_19e8h","center":"confirmation__center_19e8h","codeInput":"confirmation__codeInput_19e8h","smsComeLink":"confirmation__smsComeLink_19e8h","countdownContainer":"confirmation__countdownContainer_19e8h","getCodeButton":"confirmation__getCodeButton_19e8h","countdown":"confirmation__countdown_19e8h","countdownTimer":"confirmation__countdownTimer_19e8h"};
+require('./components/screens/initial/index.css');
+
+var CountdownSection = function (_a) {
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _b = React.useContext(context.ConfirmationContext), state = _b.state, texts = _b.texts, timeLeft = _b.timeLeft, blockSmsRetry = _b.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return React__default['default'].createElement("div", { className: styles.countdownContainer }, texts.codeSended);
+    }
+    if (processing) {
+        return (React__default['default'].createElement("div", { className: cn__default['default'](styles.loaderWrap, styles.countdownContainer) },
+            React__default['default'].createElement(coreComponentsLoader.Loader, null),
+            React__default['default'].createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return React__default['default'].createElement("div", { className: styles.countdownContainer }, texts.noAttemptsLeft);
+    }
+    if (timePassed) {
+        return (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: styles.getCodeButton }, texts.buttonRetry));
+    }
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.countdown, styles.countdownContainer) },
+        texts.countdown,
+        React__default['default'].createElement("div", { className: styles.countdownTimer }, utils.formatMsAsMinutes(timeLeft))));
+};
+
+exports.CountdownSection = CountdownSection;
+exports.styles = styles;

package/confirmation/cssm/component.d.ts

@@ -1,164 +1,4 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type ContentAlign = 'left' | 'center';
-type ConfirmationProps = {
-    /**
-     * Значение поля ввода
-     */
-    code: string;
-    /**
-     * Флаг состояния обработки введенного кода.
-     */
-    codeChecking?: boolean;
-    /**
-     * Флаг состояния отправки кода.
-     */
-    codeSending?: boolean;
-    /**
-     * Состояние ошибки подписания
-     */
-    error?: boolean;
-    /**
-     * Состояние ошибки лимитов - превышено кол-во попыток ввода или запросов кода
-     */
-    errorOverlimit?: boolean;
-    /**
-     * Состояние критической ошибки лимитов - превышены все лимиты и попытки, пользователя блокируют
-     */
-    errorOverlimitIsFatal?: boolean;
-    /**
-     * Текст ошибки подписания
-     */
-    errorText?: string;
-    /**
-     * Дополнительный контент
-     */
-    additionalContent?: ReactNode;
-    /**
-     * Флаг критичности ошибки подписания.
-     * Если true - ошибка подписания рисуется на экране без поля ввода, но с кнопкой "Запросить код"
-     * Если false - ошибка подписания рисуется под полем ввода кода
-     */
-    errorIsFatal?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Номер телефона, на который отправляется сообщение.
-     */
-    phone?: string;
-    /**
-     * Управление необходимостью маскировать номер телефона
-     */
-    hasPhoneMask?: boolean;
-    /**
-     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
-     */
-    requiredCharAmount?: number;
-    /**
-     * Управление отображением таймера с кнопкой "Запросить код"
-     */
-    hasSmsCountdown?: boolean;
-    /**
-     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
-     */
-    countdownDuration?: number;
-    /**
-     * Заголовок экрана подписания
-     */
-    signTitle?: string | React.ReactNode;
-    /**
-     * Заголовок экрана ошибки лимитов
-     */
-    overlimitTitle?: string;
-    /**
-     * Текстовое описание блокировки формы при превышении лимитов
-     */
-    overlimitText?: string;
-    /**
-     * Длительно блокировки при превышении лимитов, в милисекундах
-     */
-    overlimitCountdownDuration?: number;
-    /**
-     * Заголовок экрана блокирующей ошибки
-     */
-    errorTitle?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Текст лоадера при проверке кода
-     */
-    codeCheckingText?: string;
-    /**
-     * Текст лоадера при отправке кода
-     */
-    codeSendingText?: string;
-    /**
-     * Текст кнопки при блокирующей ошибке
-     */
-    buttonErrorText?: string;
-    /**
-     * Текст кнопки "Вернуться назад" на экране помощи
-     */
-    buttonReturnText?: string;
-    /**
-     * Текст кнопки "Запросить новый код"
-     */
-    buttonRetryText?: string;
-    /**
-     * Позиционирование контента
-     */
-    alignContent?: ContentAlign;
-    /**
-     * Сообщение, если не осталось попыток ввода кода.
-     * Кнопка повторной отправки смс при этом скрывается.
-     */
-    noAttemptsLeftMessage?: string;
-    /**
-     * Кастомный контент для компонента Countdown
-     */
-    countdownContent?: ReactNode;
-    /**
-     * Обработчик события завершения ввода кода подписания
-     */
-    onInputFinished: ({ code }: {
-        code: string;
-    }) => void;
-    /**
-     * Обработчик события изменения значения поля ввода кода подписания
-     */
-    onInputChange: ({ code }: {
-        code: string;
-    }) => void;
-    /**
-     * Обработчик события нажатия на кнопку "Запросить код"
-     */
-    onSmsRetryClick: () => void;
-    /**
-     * Обработчик события нажатия на кнопку "Запросить код" в блоке превышение лимитов
-     */
-    onOverlimitSmsRetryClick?: () => void;
-    /**
-     * Обработчик события завершения обратного отсчета для повторного запроса сообщения
-     */
-    onCountdownFinished?: () => void;
-    /**
-     * Обработчик события завершения обратного отсчета для блокировки формы
-     */
-    onOverlimitCountdownFinished?: () => void;
-    /**
-     * Обработчик события нажатия на ссылку "не приходит сообщение?"
-     */
-    onSmsHintLinkClick?: () => void;
-    /**
-     * Обработчик события нажатия на кнопку buttonErrorText (по дефолту "Понятно"), которая появляется при критической ошибке.
-     * Если не передан, то вызывается onSmsRetryClick
-     */
-    onActionWithFatalError?: () => void;
-};
-declare const Confirmation: React.ForwardRefExoticComponent<ConfirmationProps & React.RefAttributes<HTMLDivElement>>;
-export { ContentAlign, ConfirmationProps, Confirmation };
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare const Confirmation: FC<ConfirmationProps>;
+export { Confirmation };

package/confirmation/cssm/component.js

@@ -2,23 +2,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsButton = require('../../button/cssm');
-var coreComponentsLink = require('../../link/cssm');
-require('@alfalab/utils');
-require('@alfalab/hooks');
+var hooks = require('@alfalab/hooks');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var types = require('./types.js');
+require('../../code-input/cssm');
+require('../../link/cssm');
+require('./components/screens/initial/index.module.css');
+require('../../loader/cssm');
+require('../../button/cssm');
+require('./components/screens/initial/countdown-section.js');
+var components_screens_initial_component = require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+var components_screens_hint_component = require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
 require('./components/countdown-loader/index.module.css');
 require('./components/countdown-loader/component.js');
-require('./components/countdown/index.module.css');
-require('./components/countdown/component.js');
-require('../../loader/cssm');
-require('./components/code-input/component.js');
-require('./components/code-input/utils.js');
-require('./components/code-input/index.module.css');
-require('./components/sign-confirmation/index.module.css');
-var components_signConfirmation_component = require('./components/sign-confirmation/component.js');
-require('@alfalab/icons-glyph');
-require('./components/overlimit/index.module.css');
-var components_overlimit_component = require('./components/overlimit/component.js');
+require('./components/screens/temp-block/index.module.css');
+var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,99 +29,109 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var Confirmation = React.forwardRef(function (_a, ref) {
-    var additionalContent = _a.additionalContent, className = _a.className, _b = _a.countdownDuration, countdownDuration = _b === void 0 ? 60000 : _b, dataTestId = _a.dataTestId, errorIsFatal = _a.errorIsFatal, _c = _a.errorTitle, errorTitle = _c === void 0 ? 'Превышено количество попыток ввода кода' : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.errorOverlimit, errorOverlimit = _e === void 0 ? false : _e, _f = _a.errorOverlimitIsFatal, errorOverlimitIsFatal = _f === void 0 ? false : _f, errorText = _a.errorText, _g = _a.hasPhoneMask, hasPhoneMask = _g === void 0 ? true : _g, _h = _a.hasSmsCountdown, hasSmsCountdown = _h === void 0 ? true : _h, phone = _a.phone, _j = _a.requiredCharAmount, requiredCharAmount = _j === void 0 ? 5 : _j, _k = _a.signTitle, signTitle = _k === void 0 ? 'Введите код из\xa0сообщения' : _k, _l = _a.overlimitTitle, overlimitTitle = _l === void 0 ? 'Превышено количество\n попыток ввода кода' : _l, _m = _a.overlimitText, overlimitText = _m === void 0 ? 'Повторное подтверждение кодом из SMS\n будет возможно через' : _m, overlimitCountdownDuration = _a.overlimitCountdownDuration, code = _a.code, _o = _a.codeSending, codeSending = _o === void 0 ? false : _o, _p = _a.codeChecking, codeChecking = _p === void 0 ? false : _p, _q = _a.codeCheckingText, codeCheckingText = _q === void 0 ? 'Проверка кода' : _q, _r = _a.codeSendingText, codeSendingText = _r === void 0 ? 'Отправляем код' : _r, _s = _a.buttonErrorText, buttonErrorText = _s === void 0 ? 'Понятно' : _s, _t = _a.buttonReturnText, buttonReturnText = _t === void 0 ? 'Вернуться назад' : _t, _u = _a.buttonRetryText, buttonRetryText = _u === void 0 ? 'Запросить новый код' : _u, _v = _a.alignContent, alignContent = _v === void 0 ? 'left' : _v, noAttemptsLeftMessage = _a.noAttemptsLeftMessage, countdownContent = _a.countdownContent, onInputFinished = _a.onInputFinished, onSmsRetryClick = _a.onSmsRetryClick, onOverlimitSmsRetryClick = _a.onOverlimitSmsRetryClick, onActionWithFatalError = _a.onActionWithFatalError, onCountdownFinished = _a.onCountdownFinished, onOverlimitCountdownFinished = _a.onOverlimitCountdownFinished, onInputChange = _a.onInputChange, onSmsHintLinkClick = _a.onSmsHintLinkClick;
-    var _w = React.useState(false), showHint = _w[0], setShowHint = _w[1];
-    var shouldShowFatalError = errorIsFatal && Boolean(errorText);
-    var shouldShowOverlimitError = !errorIsFatal && !showHint && errorOverlimit;
-    var shouldShowSignComponent = !showHint && !shouldShowFatalError && !shouldShowOverlimitError;
-    var shouldShowHint = showHint && !shouldShowFatalError && !shouldShowOverlimitError;
-    var nonFatalError = errorIsFatal ? '' : errorText;
-    var inputRef = React.useRef(null);
-    var handleSmsRetryClick = React.useCallback(function () {
-        onSmsRetryClick();
-    }, [onSmsRetryClick]);
-    var handleOverlimitSmsRetryClick = React.useCallback(function () {
-        if (onOverlimitSmsRetryClick) {
-            onOverlimitSmsRetryClick();
-        }
-    }, [onOverlimitSmsRetryClick]);
-    var handleSmsRetryFromHintClick = React.useCallback(function () {
-        setShowHint(false);
-        if (!noAttemptsLeftMessage) {
-            onSmsRetryClick();
-        }
-    }, [onSmsRetryClick, noAttemptsLeftMessage]);
-    var handleCountdownFinished = React.useCallback(function () {
-        if (onCountdownFinished) {
-            onCountdownFinished();
-        }
-    }, [onCountdownFinished]);
-    var handleOverlimitCountdownFinished = React.useCallback(function () {
-        if (onOverlimitCountdownFinished) {
-            onOverlimitCountdownFinished();
-        }
-    }, [onOverlimitCountdownFinished]);
-    var handleSmsHintLinkClick = React.useCallback(function () {
-        setShowHint(true);
-        if (onSmsHintLinkClick) {
-            onSmsHintLinkClick();
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
         }
-    }, [onSmsHintLinkClick]);
-    var handleErrorSmsRetryClick = React.useCallback(function () {
-        if (onActionWithFatalError) {
-            onActionWithFatalError();
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
-        else {
-            onSmsRetryClick();
+    return t;
+}
+
+var confirmationScreens = {
+    INITIAL: components_screens_initial_component.Initial,
+    HINT: components_screens_hint_component.Hint,
+    FATAL_ERROR: components_screens_fatalError_component.FatalError,
+    TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
+};
+var Confirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished"]);
+    var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
+    var prevState = hooks.usePrevious(state);
+    React.useEffect(function () {
+        startTimer();
+    }, [startTimer]);
+    React.useEffect(function () {
+        /**
+         * Перезапускаем таймер после повторного запроса кода
+         */
+        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {
+            startTimer();
         }
-    }, [onActionWithFatalError, onSmsRetryClick]);
+    }, [state, prevState, startTimer]);
     React.useEffect(function () {
-        if (inputRef.current) {
-            inputRef.current.focus();
+        /**
+         * Останавливаем таймер, если новый экран/состояние не содержит таймер
+         */
+        if (!['INITIAL', 'HINT'].includes(screen) || blockSmsRetry) {
+            stopTimer();
+        }
+    }, [state, screen, blockSmsRetry, stopTimer]);
+    var handleSmsRetry = function () {
+        onChangeState('CODE_SENDING');
+        onSmsRetryClick();
+    };
+    var handleInputFinished = function (code) {
+        onChangeState('CODE_CHECKING');
+        onInputFinished(code);
+    };
+    var handleFatalErrorOkButtonClick = function () {
+        if (onFatalErrorOkButtonClick) {
+            onFatalErrorOkButtonClick();
         }
-    }, []);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), ref: ref, "data-test-id": dataTestId },
-        shouldShowSignComponent && (React__default['default'].createElement(components_signConfirmation_component.SignConfirmation, { codeChecking: codeChecking, codeSending: codeSending, smsHintVisible: !codeChecking, additionalContent: additionalContent, requiredCharAmount: requiredCharAmount, hasSmsCountdown: hasSmsCountdown, countdownDuration: countdownDuration, phone: phone, code: code, hasPhoneMask: hasPhoneMask, errorText: nonFatalError || '', error: error, title: signTitle, buttonRetryText: buttonRetryText, inputRef: inputRef, codeCheckingText: codeCheckingText, codeSendingText: codeSendingText, alignContent: alignContent, noAttemptsLeftMessage: noAttemptsLeftMessage, countdownContent: countdownContent, onInputFinished: onInputFinished, onInputChange: onInputChange, onSmsRetryClick: handleSmsRetryClick, onCountdownFinished: handleCountdownFinished, onSmsHintLinkClick: handleSmsHintLinkClick })),
-        shouldShowOverlimitError && (React__default['default'].createElement(components_overlimit_component.Overlimit, { duration: overlimitCountdownDuration, title: overlimitTitle, text: overlimitText, hasFatalError: errorOverlimitIsFatal, buttonRetryText: buttonRetryText, onOverlimitRepeatSms: handleOverlimitSmsRetryClick, onOverlimitCountdownFinished: handleOverlimitCountdownFinished })),
-        shouldShowFatalError && (React__default['default'].createElement("div", { className: styles__default['default'].error, role: 'alert' },
-            React__default['default'].createElement("span", { className: styles__default['default'].errorHeader }, errorTitle),
-            React__default['default'].createElement("span", { className: styles__default['default'].errorText }, errorText),
-            React__default['default'].createElement(coreComponentsButton.Button, { size: 'xs', view: 'secondary', onClick: handleErrorSmsRetryClick }, buttonErrorText))),
-        shouldShowHint && (React__default['default'].createElement("div", { className: styles__default['default'].phoneHintWrap },
-            React__default['default'].createElement("span", { className: styles__default['default'].errorHeader }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
-            React__default['default'].createElement("span", { className: styles__default['default'].phoneHintText }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0441\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
-            React__default['default'].createElement("div", { className: styles__default['default'].phonesWrap },
-                React__default['default'].createElement("div", { className: styles__default['default'].phoneWrap },
-                    React__default['default'].createElement(coreComponentsLink.Link, { className: styles__default['default'].phoneLink, href: 'tel:+78002000000' }, "8 800 200-00-00"),
-                    React__default['default'].createElement("span", { className: styles__default['default'].phoneDescription },
-                        ' ',
-                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
-                React__default['default'].createElement("div", { className: styles__default['default'].phoneWrap },
-                    React__default['default'].createElement(coreComponentsLink.Link, { className: styles__default['default'].phoneLink, href: 'tel:+74957888878' }, "+7 495 788-88-78"),
-                    React__default['default'].createElement("span", { className: styles__default['default'].phoneDescription },
-                        ' ',
-                        "\u2014\u00A0\u0432\u00A0\u041C\u043E\u0441\u043A\u0432\u0435 \u0438\u00A0\u0437\u0430\u00A0\u0433\u0440\u0430\u043D\u0438\u0446\u0435\u0439"))),
-            React__default['default'].createElement(coreComponentsButton.Button, { className: styles__default['default'].repeatButton, size: 'xs', view: 'secondary', onClick: handleSmsRetryFromHintClick }, buttonReturnText)))));
-});
-/**
- * Для отображения в сторибуке
- */
-Confirmation.defaultProps = {
-    countdownDuration: 60000,
-    errorTitle: 'Превышено количество попыток ввода кода',
-    hasPhoneMask: true,
-    hasSmsCountdown: true,
-    requiredCharAmount: 5,
-    signTitle: 'Введите код из\xa0сообщения',
-    codeSending: false,
-    codeChecking: false,
-    codeCheckingText: 'Проверка кода',
-    codeSendingText: 'Отправляем код',
-    buttonErrorText: 'Понятно',
-    buttonReturnText: 'Вернуться назад',
-    buttonRetryText: 'Запросить новый код',
-    alignContent: 'left',
+    };
+    var contextValue = {
+        alignContent: alignContent,
+        texts: __assign(__assign({}, types.defaultTexts), restProps.texts),
+        state: state,
+        screen: screen,
+        requiredCharAmount: requiredCharAmount,
+        countdownDuration: countdownDuration,
+        timeLeft: timeLeft,
+        tempBlockDuration: tempBlockDuration,
+        phone: phone,
+        blockSmsRetry: blockSmsRetry,
+        onTempBlockFinished: onTempBlockFinished,
+        onChangeState: onChangeState,
+        onChangeScreen: onChangeScreen,
+        onInputFinished: handleInputFinished,
+        onSmsRetryClick: handleSmsRetry,
+        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
+    };
+    var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
+    var CurrentScreen = screensMap[screen];
+    return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, null))));
 };
 
 exports.Confirmation = Confirmation;

package/confirmation/cssm/components/countdown-loader/component.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 type Props = {
     progress: number;
-    className: string;
+    className?: string;
 };
 declare const CountdownLoader: FC<Props>;
 export { CountdownLoader };

package/confirmation/cssm/components/index.d.ts

@@ -1,4 +1,2 @@
-export * from "./countdown/index";
-export * from "./sign-confirmation/index";
+export * from "./screens/index";
 export * from "./countdown-loader/index";
-export * from "./overlimit/index";