@alfalab/core-components-confirmation 9.0.7 → 10.0.0

package/dist/modern/component.js

@@ -1,113 +1,86 @@
-import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import cn from 'classnames';
-import { Button } from '@alfalab/core-components-button/dist/modern';
-import { Link } from '@alfalab/core-components-link/dist/modern';
-import '@alfalab/utils';
-import '@alfalab/hooks';
-import './components/countdown-loader/component.js';
-import './components/countdown/component.js';
+import { usePrevious } from '@alfalab/hooks';
+import { ONE_MINUTE, ONE_DAY, useCountdown } from './utils.js';
+import { ConfirmationContext } from './context.js';
+import { defaultTexts } from './types.js';
+import '@alfalab/core-components-code-input/dist/modern';
+import '@alfalab/core-components-link/dist/modern';
+import './countdown-section-91f055c8.js';
 import '@alfalab/core-components-loader/dist/modern';
-import './components/code-input/utils.js';
-import './components/code-input/component.js';
-import { SignConfirmation } from './components/sign-confirmation/component.js';
-import '@alfalab/icons-glyph';
-import { Overlimit } from './components/overlimit/component.js';
+import '@alfalab/core-components-button/dist/modern';
+import { Initial } from './components/screens/initial/component.js';
+import { Hint } from './components/screens/hint/component.js';
+import { FatalError } from './components/screens/fatal-error/component.js';
+import './components/countdown-loader/component.js';
+import { TempBlock } from './components/screens/temp-block/component.js';
 
-var styles = {"component":"confirmation__component_4crub","error":"confirmation__error_4crub","errorHeader":"confirmation__errorHeader_4crub","errorText":"confirmation__errorText_4crub","phoneHintWrap":"confirmation__phoneHintWrap_4crub","phoneHintText":"confirmation__phoneHintText_4crub","phonesWrap":"confirmation__phonesWrap_4crub","phoneWrap":"confirmation__phoneWrap_4crub","phoneDescription":"confirmation__phoneDescription_4crub","center":"confirmation__center_4crub"};
+var styles = {"component":"confirmation__component_1lhb7","center":"confirmation__center_1lhb7"};
 require('./index.css')
 
-const Confirmation = forwardRef(({ additionalContent, className, countdownDuration = 60000, dataTestId, errorIsFatal, errorTitle = 'Превышено количество попыток ввода кода', error = false, errorOverlimit = false, errorOverlimitIsFatal = false, errorText, hasPhoneMask = true, hasSmsCountdown = true, phone, requiredCharAmount = 5, signTitle = 'Введите код из\xa0сообщения', overlimitTitle = 'Превышено количество\n попыток ввода кода', overlimitText = 'Повторное подтверждение кодом из SMS\n будет возможно через', overlimitCountdownDuration, code, codeSending = false, codeChecking = false, codeCheckingText = 'Проверка кода', codeSendingText = 'Отправляем код', buttonErrorText = 'Понятно', buttonReturnText = 'Вернуться назад', buttonRetryText = 'Запросить новый код', alignContent = 'left', noAttemptsLeftMessage, countdownContent, onInputFinished, onSmsRetryClick, onOverlimitSmsRetryClick, onActionWithFatalError, onCountdownFinished, onOverlimitCountdownFinished, onInputChange, onSmsHintLinkClick, }, ref) => {
-    const [showHint, setShowHint] = useState(false);
-    const shouldShowFatalError = errorIsFatal && Boolean(errorText);
-    const shouldShowOverlimitError = !errorIsFatal && !showHint && errorOverlimit;
-    const shouldShowSignComponent = !showHint && !shouldShowFatalError && !shouldShowOverlimitError;
-    const shouldShowHint = showHint && !shouldShowFatalError && !shouldShowOverlimitError;
-    const nonFatalError = errorIsFatal ? '' : errorText;
-    const inputRef = useRef(null);
-    const handleSmsRetryClick = useCallback(() => {
-        onSmsRetryClick();
-    }, [onSmsRetryClick]);
-    const handleOverlimitSmsRetryClick = useCallback(() => {
-        if (onOverlimitSmsRetryClick) {
-            onOverlimitSmsRetryClick();
-        }
-    }, [onOverlimitSmsRetryClick]);
-    const handleSmsRetryFromHintClick = useCallback(() => {
-        setShowHint(false);
-        if (!noAttemptsLeftMessage) {
-            onSmsRetryClick();
-        }
-    }, [onSmsRetryClick, noAttemptsLeftMessage]);
-    const handleCountdownFinished = useCallback(() => {
-        if (onCountdownFinished) {
-            onCountdownFinished();
-        }
-    }, [onCountdownFinished]);
-    const handleOverlimitCountdownFinished = useCallback(() => {
-        if (onOverlimitCountdownFinished) {
-            onOverlimitCountdownFinished();
-        }
-    }, [onOverlimitCountdownFinished]);
-    const handleSmsHintLinkClick = useCallback(() => {
-        setShowHint(true);
-        if (onSmsHintLinkClick) {
-            onSmsHintLinkClick();
-        }
-    }, [onSmsHintLinkClick]);
-    const handleErrorSmsRetryClick = useCallback(() => {
-        if (onActionWithFatalError) {
-            onActionWithFatalError();
-        }
-        else {
-            onSmsRetryClick();
+const confirmationScreens = {
+    INITIAL: Initial,
+    HINT: Hint,
+    FATAL_ERROR: FatalError,
+    TEMP_BLOCK: TempBlock,
+};
+const Confirmation = ({ state, screen, alignContent = 'left', children, requiredCharAmount = 5, countdownDuration = ONE_MINUTE, tempBlockDuration = ONE_DAY, phone, blockSmsRetry, dataTestId, className, getScreensMap, onInputFinished, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, onTempBlockFinished, ...restProps }) => {
+    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
+    const prevState = usePrevious(state);
+    useEffect(() => {
+        startTimer();
+    }, [startTimer]);
+    useEffect(() => {
+        /**
+         * Перезапускаем таймер после повторного запроса кода
+         */
+        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {
+            startTimer();
         }
-    }, [onActionWithFatalError, onSmsRetryClick]);
+    }, [state, prevState, startTimer]);
     useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
+        /**
+         * Останавливаем таймер, если новый экран/состояние не содержит таймер
+         */
+        if (!['INITIAL', 'HINT'].includes(screen) || blockSmsRetry) {
+            stopTimer();
+        }
+    }, [state, screen, blockSmsRetry, stopTimer]);
+    const handleSmsRetry = () => {
+        onChangeState('CODE_SENDING');
+        onSmsRetryClick();
+    };
+    const handleInputFinished = (code) => {
+        onChangeState('CODE_CHECKING');
+        onInputFinished(code);
+    };
+    const handleFatalErrorOkButtonClick = () => {
+        if (onFatalErrorOkButtonClick) {
+            onFatalErrorOkButtonClick();
         }
-    }, []);
-    return (React.createElement("div", { className: cn(styles.component, styles[alignContent], className), ref: ref, "data-test-id": dataTestId },
-        shouldShowSignComponent && (React.createElement(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.createElement(Overlimit, { duration: overlimitCountdownDuration, title: overlimitTitle, text: overlimitText, hasFatalError: errorOverlimitIsFatal, buttonRetryText: buttonRetryText, onOverlimitRepeatSms: handleOverlimitSmsRetryClick, onOverlimitCountdownFinished: handleOverlimitCountdownFinished })),
-        shouldShowFatalError && (React.createElement("div", { className: styles.error, role: 'alert' },
-            React.createElement("span", { className: styles.errorHeader }, errorTitle),
-            React.createElement("span", { className: styles.errorText }, errorText),
-            React.createElement(Button, { size: 'xs', view: 'secondary', onClick: handleErrorSmsRetryClick }, buttonErrorText))),
-        shouldShowHint && (React.createElement("div", { className: styles.phoneHintWrap },
-            React.createElement("span", { className: styles.errorHeader }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
-            React.createElement("span", { className: styles.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.createElement("div", { className: styles.phonesWrap },
-                React.createElement("div", { className: styles.phoneWrap },
-                    React.createElement(Link, { className: styles.phoneLink, href: 'tel:+78002000000' }, "8 800 200-00-00"),
-                    React.createElement("span", { className: styles.phoneDescription },
-                        ' ',
-                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
-                React.createElement("div", { className: styles.phoneWrap },
-                    React.createElement(Link, { className: styles.phoneLink, href: 'tel:+74957888878' }, "+7 495 788-88-78"),
-                    React.createElement("span", { className: styles.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.createElement(Button, { className: styles.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',
+    };
+    const contextValue = {
+        alignContent,
+        texts: { ...defaultTexts, ...restProps.texts },
+        state,
+        screen,
+        requiredCharAmount,
+        countdownDuration,
+        timeLeft,
+        tempBlockDuration,
+        phone,
+        blockSmsRetry,
+        onTempBlockFinished,
+        onChangeState,
+        onChangeScreen,
+        onInputFinished: handleInputFinished,
+        onSmsRetryClick: handleSmsRetry,
+        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
+    };
+    const screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
+    const CurrentScreen = screensMap[screen];
+    return (React.createElement(ConfirmationContext.Provider, { value: contextValue },
+        React.createElement("div", { className: cn(styles.component, styles[alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, null))));
 };
 
 export { Confirmation };

package/dist/modern/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/dist/modern/components/countdown-loader/component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-var styles = {"circle":"confirmation__circle_1t7fa"};
+var styles = {"circle":"confirmation__circle_c2vwh"};
 require('./index.css')
 
 const SIZE = 16;

package/dist/modern/components/countdown-loader/index.css

@@ -1,4 +1,4 @@
-/* hash: ry20i */
+/* hash: 1j9l0 */
 :root {
     --color-light-graphic-tertiary: #b6bcc3;
 }
@@ -19,7 +19,7 @@
 
     /* input */
 }
-.confirmation__circle_1t7fa {
+.confirmation__circle_c2vwh {
     fill: transparent;
     stroke: var(--color-light-graphic-tertiary);
     stroke-width: 2px;

package/dist/modern/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";

package/dist/modern/components/index.js

@@ -1,14 +1,15 @@
 import 'react';
 import 'classnames';
-import '@alfalab/core-components-button/dist/modern';
-import '@alfalab/core-components-link/dist/modern';
-import '@alfalab/utils';
 import '@alfalab/hooks';
-export { CountdownLoader } from './countdown-loader/component.js';
-export { Countdown, formatMsAsMinutes } from './countdown/component.js';
+import '../utils.js';
+import '../context.js';
+import '@alfalab/core-components-code-input/dist/modern';
+import '@alfalab/core-components-link/dist/modern';
+import '../countdown-section-91f055c8.js';
 import '@alfalab/core-components-loader/dist/modern';
-import './code-input/utils.js';
-import './code-input/component.js';
-export { SignConfirmation } from './sign-confirmation/component.js';
-import '@alfalab/icons-glyph';
-export { Overlimit } from './overlimit/component.js';
+import '@alfalab/core-components-button/dist/modern';
+export { Initial } from './screens/initial/component.js';
+export { Hint } from './screens/hint/component.js';
+export { FatalError } from './screens/fatal-error/component.js';
+export { CountdownLoader } from './countdown-loader/component.js';
+export { TempBlock } from './screens/temp-block/component.js';

package/dist/modern/components/screens/fatal-error/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FatalError: () => JSX.Element;
+export { FatalError };

package/dist/modern/components/screens/fatal-error/component.js

@@ -0,0 +1,17 @@
+import React, { useContext, Fragment } from 'react';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { Button } from '@alfalab/core-components-button/dist/modern';
+
+var styles = {"header":"confirmation__header_g9o34","description":"confirmation__description_g9o34"};
+require('./index.css')
+
+const FatalError = () => {
+    const { texts, onFatalErrorOkButtonClick } = useContext(ConfirmationContext);
+    return (React.createElement(Fragment, null,
+        React.createElement("h3", { className: styles.header }, texts.fatalErrorTitle),
+        React.createElement("div", { className: styles.description }, texts.fatalErrorDescription),
+        React.createElement(Button, { size: 'xs', view: 'secondary', onClick: onFatalErrorOkButtonClick }, texts.fatalErrorButton)));
+};
+
+export { FatalError };

package/dist/modern/components/screens/fatal-error/index.css

@@ -0,0 +1,61 @@
+/* hash: 11nsd */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* title */
+    --confirmation-title-font-size: 22px;
+    --confirmation-title-line-height: 26px;
+    --confirmation-title-font-weight: 700;
+    --confirmation-title-font-family: var(--font-family-system);
+    --confirmation-title-color: var(--color-light-text-primary);
+    --confirmation-title-font-feature-settings: normal;
+
+    /* text */
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-font-family: var(--font-family-system);
+    --confirmation-text-color: var(--color-light-text-secondary);
+
+    /* error */
+
+    /* input */
+}
+.confirmation__header_g9o34 {
+    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);
+}
+.confirmation__description_g9o34 {
+    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);
+    color: var(--color-light-text-primary);
+}

package/dist/modern/components/screens/fatal-error/index.js

@@ -0,0 +1,5 @@
+import 'react';
+import '../../../utils.js';
+import '../../../context.js';
+import '@alfalab/core-components-button/dist/modern';
+export { FatalError } from './component.js';

package/dist/modern/components/screens/hint/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Hint: () => JSX.Element;
+export { Hint };

package/dist/modern/components/screens/hint/component.js

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { Link } from '@alfalab/core-components-link/dist/modern';
+import { Button } from '@alfalab/core-components-button/dist/modern';
+
+var styles = {"center":"confirmation__center_1td1k","phoneHintWrap":"confirmation__phoneHintWrap_1td1k","hintWrap":"confirmation__hintWrap_1td1k","title":"confirmation__title_1td1k","text":"confirmation__text_1td1k","phonesWrap":"confirmation__phonesWrap_1td1k","phoneWrap":"confirmation__phoneWrap_1td1k","phoneLink":"confirmation__phoneLink_1td1k","phoneDescription":"confirmation__phoneDescription_1td1k","hintButton":"confirmation__hintButton_1td1k"};
+require('./index.css')
+
+const Hint = () => {
+    const { alignContent, texts, onChangeScreen, onChangeState } = useContext(ConfirmationContext);
+    const handleReturnButtonClick = () => {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+    return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
+        React.createElement("div", { className: styles.hintWrap },
+            React.createElement("h3", { className: styles.title }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
+            React.createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \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.createElement("div", { className: styles.phonesWrap },
+                React.createElement("div", { className: styles.phoneWrap },
+                    React.createElement(Link, { href: 'tel:+78002000000', className: styles.phoneLink }, "8 800 200-00-00"),
+                    React.createElement("span", { className: styles.phoneDescription },
+                        ' ',
+                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
+                React.createElement("div", { className: styles.phoneWrap },
+                    React.createElement(Link, { href: 'tel:+74957888878', className: styles.phoneLink }, "+7 495 78-888-78"),
+                    React.createElement("span", { className: styles.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.createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
+            React.createElement(Button, { size: 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton }, texts.hintButton))));
+};
+
+export { Hint };

package/dist/modern/components/screens/hint/index.css

@@ -0,0 +1,103 @@
+/* hash: 36cl4 */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* title */
+    --confirmation-title-font-size: 22px;
+    --confirmation-title-line-height: 26px;
+    --confirmation-title-font-weight: 700;
+    --confirmation-title-font-family: var(--font-family-system);
+    --confirmation-title-color: var(--color-light-text-primary);
+    --confirmation-title-font-feature-settings: normal;
+
+    /* text */
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-font-family: var(--font-family-system);
+    --confirmation-text-color: var(--color-light-text-secondary);
+
+    /* error */
+
+    /* input */
+}
+.confirmation__center_1td1k .confirmation__phoneHintWrap_1td1k {
+        align-items: center;
+    }
+.confirmation__center_1td1k .confirmation__hintWrap_1td1k {
+        align-items: center;
+    }
+.confirmation__hintWrap_1td1k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation__title_1td1k {
+    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);
+}
+.confirmation__text_1td1k {
+    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-xl);
+}
+.confirmation__phonesWrap_1td1k {
+    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);
+
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__phoneWrap_1td1k {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation__phoneWrap_1td1k:last-child {
+        margin-bottom: 0;
+    }
+.confirmation__phoneLink_1td1k {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500
+}
+.confirmation__phoneLink_1td1k > span {
+        border-bottom: none;
+    }
+.confirmation__phoneDescription_1td1k {
+    color: var(--confirmation-text-color);
+}
+.confirmation__hintButton_1td1k {
+    margin-top: var(--gap-2xl);
+}

package/dist/modern/components/screens/hint/index.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '../../../utils.js';
+import '../../../context.js';
+import '@alfalab/core-components-link/dist/modern';
+import '@alfalab/core-components-button/dist/modern';
+export { Hint } from './component.js';

package/dist/modern/components/screens/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./initial/index";
+export * from "./hint/index";
+export * from "./fatal-error/index";
+export * from "./temp-block/index";

package/dist/modern/components/screens/index.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../utils.js';
+import '../../context.js';
+import '@alfalab/core-components-code-input/dist/modern';
+import '@alfalab/core-components-link/dist/modern';
+import '../../countdown-section-91f055c8.js';
+import '@alfalab/core-components-loader/dist/modern';
+import '@alfalab/core-components-button/dist/modern';
+export { Initial } from './initial/component.js';
+export { Hint } from './hint/component.js';
+export { FatalError } from './fatal-error/component.js';
+import '../countdown-loader/component.js';
+export { TempBlock } from './temp-block/component.js';

package/dist/modern/components/screens/initial/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Initial: () => JSX.Element;
+export { Initial };

package/dist/modern/components/screens/initial/component.js

@@ -0,0 +1,86 @@
+import React, { useContext, useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import cn from 'classnames';
+import { usePrevious } from '@alfalab/hooks';
+import '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { CodeInput } from '@alfalab/core-components-code-input/dist/modern';
+import { Link } from '@alfalab/core-components-link/dist/modern';
+import { s as styles, C as CountdownSection } from '../../../countdown-section-91f055c8.js';
+import '@alfalab/core-components-loader/dist/modern';
+import '@alfalab/core-components-button/dist/modern';
+
+const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
+const Initial = () => {
+    const { state, alignContent, texts, requiredCharAmount, timeLeft, phone, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
+    const prevState = usePrevious(state);
+    const inputRef = useRef(null);
+    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);
+    const timerId = useRef(0);
+    const handleInputComplete = code => {
+        onInputFinished(code);
+    };
+    const handleSmsHintLinkClick = () => {
+        onChangeScreen('HINT');
+    };
+    const handleInputChange = () => {
+        if (state === 'CODE_ERROR') {
+            onChangeState('INITIAL');
+        }
+    };
+    const handleSmsRetryClick = () => {
+        if (inputRef.current) {
+            inputRef.current.reset();
+        }
+        onSmsRetryClick();
+    };
+    const clearTimer = useCallback(() => {
+        window.clearTimeout(timerId.current);
+    }, []);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        return () => {
+            clearTimer();
+        };
+    }, [clearTimer]);
+    useEffect(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        if (state === 'CODE_ERROR' && prevState !== 'CODE_ERROR') {
+            inputRef.current.focus(requiredCharAmount - 1);
+        }
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            inputRef.current.focus();
+        }
+    }, [prevState, state, requiredCharAmount]);
+    useLayoutEffect(() => {
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            setCodeSendHintVisible(true);
+            clearTimer();
+            timerId.current = window.setTimeout(() => {
+                setCodeSendHintVisible(false);
+            }, CODE_SEND_HINT_VISIBLE_DURATION);
+        }
+    }, [prevState, state, clearTimer]);
+    const getCodeInputError = () => {
+        if (state === 'CODE_ERROR') {
+            return texts.codeError || true;
+        }
+        return false;
+    };
+    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
+    const timePassed = timeLeft === 0;
+    return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
+        React.createElement("h3", { className: styles.header }, texts.title),
+        phone && React.createElement("div", { className: styles.phone },
+            "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
+            phone),
+        React.createElement("div", { className: styles.inputContainer },
+            React.createElement(CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: styles.codeInput, onComplete: handleInputComplete, onChange: handleInputChange })),
+        React.createElement(CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick }),
+        React.createElement(Link, { onClick: handleSmsHintLinkClick, className: styles.smsComeLink, view: 'secondary', pseudo: true }, texts.linkToHint)));
+};
+
+export { Initial };

package/dist/modern/components/screens/initial/countdown-section.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '../../../utils.js';
+import '../../../context.js';
+export { C as CountdownSection } from '../../../countdown-section-91f055c8.js';
+import '@alfalab/core-components-loader/dist/modern';
+import '@alfalab/core-components-button/dist/modern';