@alfalab/core-components 30.6.0 → 30.8.0-beta.0

package/confirmation-v-1/esm/components/sign-confirmation/index.js

@@ -0,0 +1,12 @@
+import 'react';
+import 'classnames';
+import '../../../../button/esm';
+import '../../../../link/esm';
+import '@alfalab/utils';
+import '@alfalab/hooks';
+import '../countdown-loader/component.js';
+import '../countdown/component.js';
+import '../../../../loader/esm';
+import '../code-input/utils.js';
+import '../code-input/component.js';
+export { SignConfirmation } from './component.js';

package/confirmation-v-1/esm/index.css

@@ -0,0 +1,119 @@
+/* hash: 1nyic */
+: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;
+    --gap-4xl: 48px;
+}
+: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-v-1__component_b6t8k {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-family: var(--confirmation-text-font-family);
+}
+.confirmation-v-1__error_b6t8k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation-v-1__errorHeader_b6t8k {
+    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-2xl);
+    color: var(--confirmation-title-color);
+}
+.confirmation-v-1__errorText_b6t8k {
+    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(--confirmation-text-color);
+}
+.confirmation-v-1__phoneHintWrap_b6t8k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation-v-1__phoneHintText_b6t8k {
+    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);
+    color: var(--confirmation-text-color);
+}
+.confirmation-v-1__phonesWrap_b6t8k {
+    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-4xl);
+}
+.confirmation-v-1__phoneWrap_b6t8k {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation-v-1__phoneWrap_b6t8k:last-child {
+        margin-bottom: 0;
+    }
+.confirmation-v-1__phoneDescription_b6t8k {
+    color: var(--confirmation-text-color);
+}
+.confirmation-v-1__component_b6t8k.confirmation-v-1__center_b6t8k {
+    text-align: center;
+}
+.confirmation-v-1__center_b6t8k .confirmation-v-1__phoneHintWrap_b6t8k {
+        align-items: center;
+    }
+.confirmation-v-1__center_b6t8k .confirmation-v-1__error_b6t8k {
+        align-items: center;
+    }

package/confirmation-v-1/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./component";
+export * from "./components/index";

package/confirmation-v-1/esm/index.js

@@ -0,0 +1,15 @@
+import 'react';
+import 'classnames';
+import '../../button/esm';
+import '../../link/esm';
+import '@alfalab/utils';
+import '@alfalab/hooks';
+export { CountdownLoader } from './components/countdown-loader/component.js';
+export { Countdown, formatMsAsMinutes } from './components/countdown/component.js';
+import '../../loader/esm';
+import './components/code-input/utils.js';
+import './components/code-input/component.js';
+export { SignConfirmation } from './components/sign-confirmation/component.js';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+export { Overlimit } from './components/overlimit/component.js';
+export { ConfirmationV1 } from './component.js';

package/confirmation-v-1/index.css

@@ -0,0 +1,119 @@
+/* hash: 1nyic */
+: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;
+    --gap-4xl: 48px;
+}
+: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-v-1__component_b6t8k {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-family: var(--confirmation-text-font-family);
+}
+.confirmation-v-1__error_b6t8k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation-v-1__errorHeader_b6t8k {
+    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-2xl);
+    color: var(--confirmation-title-color);
+}
+.confirmation-v-1__errorText_b6t8k {
+    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(--confirmation-text-color);
+}
+.confirmation-v-1__phoneHintWrap_b6t8k {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation-v-1__phoneHintText_b6t8k {
+    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);
+    color: var(--confirmation-text-color);
+}
+.confirmation-v-1__phonesWrap_b6t8k {
+    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-4xl);
+}
+.confirmation-v-1__phoneWrap_b6t8k {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation-v-1__phoneWrap_b6t8k:last-child {
+        margin-bottom: 0;
+    }
+.confirmation-v-1__phoneDescription_b6t8k {
+    color: var(--confirmation-text-color);
+}
+.confirmation-v-1__component_b6t8k.confirmation-v-1__center_b6t8k {
+    text-align: center;
+}
+.confirmation-v-1__center_b6t8k .confirmation-v-1__phoneHintWrap_b6t8k {
+        align-items: center;
+    }
+.confirmation-v-1__center_b6t8k .confirmation-v-1__error_b6t8k {
+        align-items: center;
+    }

package/confirmation-v-1/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./component";
+export * from "./components/index";

package/confirmation-v-1/index.js

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('../button');
+require('../link');
+require('@alfalab/utils');
+require('@alfalab/hooks');
+var components_countdownLoader_component = require('./components/countdown-loader/component.js');
+var components_countdown_component = require('./components/countdown/component.js');
+require('../loader');
+require('./components/code-input/component.js');
+require('./components/code-input/utils.js');
+var components_signConfirmation_component = require('./components/sign-confirmation/component.js');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
+var components_overlimit_component = require('./components/overlimit/component.js');
+var component = require('./component.js');
+
+
+
+exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
+exports.Countdown = components_countdown_component.Countdown;
+exports.formatMsAsMinutes = components_countdown_component.formatMsAsMinutes;
+exports.SignConfirmation = components_signConfirmation_component.SignConfirmation;
+exports.Overlimit = components_overlimit_component.Overlimit;
+exports.ConfirmationV1 = component.ConfirmationV1;

package/confirmation-v-1/modern/component.d.ts

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type ContentAlign = 'left' | 'center';
+type ConfirmationV1Props = {
+    /**
+     * Значение поля ввода
+     */
+    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;
+};
+/**
+ * @deprecated
+ */
+declare const ConfirmationV1: React.ForwardRefExoticComponent<ConfirmationV1Props & React.RefAttributes<HTMLDivElement>>;
+export { ContentAlign, ConfirmationV1Props, ConfirmationV1 };

package/confirmation-v-1/modern/component.js

@@ -0,0 +1,116 @@
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import '@alfalab/utils';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import { Button } from '../../button/modern';
+import { Link } from '../../link/modern';
+import './components/countdown-loader/component.js';
+import './components/countdown/component.js';
+import '../../loader/modern';
+import './components/code-input/utils.js';
+import './components/code-input/component.js';
+import { SignConfirmation } from './components/sign-confirmation/component.js';
+import { Overlimit } from './components/overlimit/component.js';
+
+var styles = {"component":"confirmation-v-1__component_b6t8k","error":"confirmation-v-1__error_b6t8k","errorHeader":"confirmation-v-1__errorHeader_b6t8k","errorText":"confirmation-v-1__errorText_b6t8k","phoneHintWrap":"confirmation-v-1__phoneHintWrap_b6t8k","phoneHintText":"confirmation-v-1__phoneHintText_b6t8k","phonesWrap":"confirmation-v-1__phonesWrap_b6t8k","phoneWrap":"confirmation-v-1__phoneWrap_b6t8k","phoneDescription":"confirmation-v-1__phoneDescription_b6t8k","center":"confirmation-v-1__center_b6t8k"};
+require('./index.css');
+
+/**
+ * @deprecated
+ */
+const ConfirmationV1 = 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();
+        }
+    }, [onActionWithFatalError, onSmsRetryClick]);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    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)))));
+});
+/**
+ * Для отображения в сторибуке
+ */
+ConfirmationV1.defaultProps = {
+    countdownDuration: 60000,
+    errorTitle: 'Превышено количество попыток ввода кода',
+    hasPhoneMask: true,
+    hasSmsCountdown: true,
+    requiredCharAmount: 5,
+    signTitle: 'Введите код из\xa0сообщения',
+    codeSending: false,
+    codeChecking: false,
+    codeCheckingText: 'Проверка кода',
+    codeSendingText: 'Отправляем код',
+    buttonErrorText: 'Понятно',
+    buttonReturnText: 'Вернуться назад',
+    buttonRetryText: 'Запросить новый код',
+    alignContent: 'left',
+};
+
+export { ConfirmationV1 };

package/confirmation-v-1/modern/components/code-input/component.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import React from 'react';
+import { KeyboardEvent } from "react";
+import { ContentAlign } from "../../component";
+type CodeInputProps = {
+    processing: boolean;
+    value: string;
+    slotsCount: number;
+    error: boolean;
+    className?: string;
+    alignContent: ContentAlign;
+    handleChange: (code: string) => void;
+    handleInputKeyDown: (event: KeyboardEvent) => void;
+};
+declare const CodeInput: React.ForwardRefExoticComponent<CodeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { CodeInput };