@alfalab/core-components-confirmation 14.0.1 → 14.1.0

package/modern/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType, ReactNode } from 'react';
-export declare type ConfirmationProps = {
+import { type ComponentType, type ReactNode } from 'react';
+export interface ConfirmationProps {
     /**
      * Экран компонента
      */
@@ -16,6 +16,11 @@ export declare type ConfirmationProps = {
      * Позиционирование контента
      */
     alignContent?: 'left' | 'center';
+    /**
+     * HTML тег для заголовка
+     * @default 'h3'
+     */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
      * Объект с текстами
      */
@@ -107,11 +112,11 @@ export declare type ConfirmationProps = {
      * @default 1300
      */
     errorVisibleDuration?: number;
-};
-export declare type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
+}
+export declare type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
     timeLeft: number;
 };
-export declare type ConfirmationTexts = {
+export interface ConfirmationTexts {
     /**
      * Экран INITIAL
      */
@@ -152,10 +157,10 @@ export declare type ConfirmationTexts = {
     tempBlockOverTitle?: ReactNode;
     tempBlockOverDescription?: ReactNode;
     tempBlockOverButton?: string;
-};
+}
 export declare type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
 export declare type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
-export declare type ScreensMap = {
+export interface ScreensMap {
     [key: string]: ComponentType;
-};
+}
 export declare const defaultTexts: ConfirmationTexts;

package/modern/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { ComponentType, ReactNode } from 'react';\n\nexport type ConfirmationProps = {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n};\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport type ConfirmationTexts = {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n};\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport type ScreensMap = {\n    [key: string]: ComponentType;\n};\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":"AA2Oa,MAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { type ComponentType, type ReactNode } from 'react';\n\nexport interface ConfirmationProps {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n}\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'titleTag'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport interface ConfirmationTexts {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n}\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport interface ScreensMap {\n    [key: string]: ComponentType;\n}\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":"AAkPa,MAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}

package/modern/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ConfirmationProps } from './types';
+import { type ConfirmationProps } from './types';
 /**
  * Форматирование миллисекунд в hh:mm:ss.
  *

package/modern/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n    const totalSeconds = Math.ceil(ms / 1000);\n    const totalMinutes = Math.floor(totalSeconds / 60);\n    const totalHours = Math.floor(totalMinutes / 60);\n\n    const seconds = totalSeconds % 60;\n    const paddedSeconds = `00${seconds}`.slice(-2);\n\n    if (totalHours > 0) {\n        const minutes = totalMinutes % 60;\n\n        const paddedMinutes = `00${minutes}`.slice(-2);\n        const paddedHours = `00${totalHours}`.slice(-2);\n\n        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n    }\n\n    const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n    return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n    const timerId = useRef(0);\n\n    const start = useRef(0);\n\n    const [timePassed, setTimePassed] = useState(0);\n\n    const stopTimer = useCallback(() => {\n        window.clearInterval(timerId.current);\n    }, []);\n\n    const updateProgress = useCallback(() => {\n        const passed = Date.now() - start.current;\n\n        if (passed >= countdownDuration) {\n            stopTimer();\n\n            setTimePassed(countdownDuration);\n        } else {\n            setTimePassed(passed);\n        }\n    }, [countdownDuration, stopTimer]);\n\n    const startTimer = useCallback(() => {\n        stopTimer();\n\n        start.current = Date.now();\n\n        updateProgress();\n\n        timerId.current = window.setInterval(updateProgress, tick);\n    }, [stopTimer, updateProgress, tick]);\n\n    const timeLeft = countdownDuration - timePassed;\n\n    useEffect(\n        () => () => {\n            stopTimer();\n        },\n        [stopTimer],\n    );\n\n    return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n    state?: ConfirmationProps['state'];\n    screen?: ConfirmationProps['screen'];\n    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n        blockSmsRetry ?? false,\n    );\n\n    return {\n        confirmationState,\n        confirmationScreen,\n        confirmationBlockSmsRetry,\n        setConfirmationState,\n        setConfirmationScreen,\n        setConfirmationBlockSmsRetry,\n    };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,MAAM,aAAa,GAAG,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAE9C,IAAI,UAAU,GAAG,CAAC,EAAE;AAChB,QAAA,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE;QAEjC,MAAM,aAAa,GAAG,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9C,MAAM,WAAW,GAAG,CAAA,EAAA,EAAK,UAAU,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;AAE/C,QAAA,OAAO,GAAG,WAAW,CAAA,CAAA,EAAI,aAAa,CAAI,CAAA,EAAA,aAAa,EAAE;AAC5D;IAED,MAAM,aAAa,GAAG,CAAA,EAAA,EAAK,YAAY,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;AAEnD,IAAA,OAAO,CAAG,EAAA,aAAa,CAAI,CAAA,EAAA,aAAa,EAAE;AAC9C;AAIA;;AAEG;AACU,MAAA,YAAY,GAAiB,CAAC,iBAAiB,EAAE,IAAI,GAAG,IAAI,KAAI;AACzE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;AAEzB,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;IAEvB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE/C,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAK;AAC/B,QAAA,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;KACxC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAK;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO;QAEzC,IAAI,MAAM,IAAI,iBAAiB,EAAE;AAC7B,YAAA,SAAS,EAAE;YAEX,aAAa,CAAC,iBAAiB,CAAC;AACnC;AAAM,aAAA;YACH,aAAa,CAAC,MAAM,CAAC;AACxB;AACL,KAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAElC,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,SAAS,EAAE;AAEX,QAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;AAE1B,QAAA,cAAc,EAAE;QAEhB,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC;KAC7D,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;AAErC,IAAA,MAAM,QAAQ,GAAG,iBAAiB,GAAG,UAAU;AAE/C,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,SAAS,EAAE;AACf,KAAC,EACD,CAAC,SAAS,CAAC,CACd;AAED,IAAA,OAAO,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;AAC5C;AAEa,MAAA,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;AACzB,MAAA,UAAU,GAAG,EAAE,GAAG;AAQxB,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAA4B,GAAA,EAAE,KAAI;AAC5F,IAAA,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,SAAS,CAAC;AAC9E,IAAA,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,SAAS,CAAC;AACjF,IAAA,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CACtE,aAAa,IAAI,KAAK,CACzB;IAED,OAAO;QACH,iBAAiB;QACjB,kBAAkB;QAClB,yBAAyB;QACzB,oBAAoB;QACpB,qBAAqB;QACrB,4BAA4B;KAC/B;AACL;AAEA,MAAM,yBAAyB,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC;AAEvD;;AAEG;AACG,SAAU,YAAY,CAAC,KAAa,EAAA;IACtC,OAAO,CAAA,IAAA,EAAO,KAAK,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAA,CAAE;AAChE;;;;"}
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n    const totalSeconds = Math.ceil(ms / 1000);\n    const totalMinutes = Math.floor(totalSeconds / 60);\n    const totalHours = Math.floor(totalMinutes / 60);\n\n    const seconds = totalSeconds % 60;\n    const paddedSeconds = `00${seconds}`.slice(-2);\n\n    if (totalHours > 0) {\n        const minutes = totalMinutes % 60;\n\n        const paddedMinutes = `00${minutes}`.slice(-2);\n        const paddedHours = `00${totalHours}`.slice(-2);\n\n        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n    }\n\n    const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n    return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n    const timerId = useRef(0);\n\n    const start = useRef(0);\n\n    const [timePassed, setTimePassed] = useState(0);\n\n    const stopTimer = useCallback(() => {\n        window.clearInterval(timerId.current);\n    }, []);\n\n    const updateProgress = useCallback(() => {\n        const passed = Date.now() - start.current;\n\n        if (passed >= countdownDuration) {\n            stopTimer();\n\n            setTimePassed(countdownDuration);\n        } else {\n            setTimePassed(passed);\n        }\n    }, [countdownDuration, stopTimer]);\n\n    const startTimer = useCallback(() => {\n        stopTimer();\n\n        start.current = Date.now();\n\n        updateProgress();\n\n        timerId.current = window.setInterval(updateProgress, tick);\n    }, [stopTimer, updateProgress, tick]);\n\n    const timeLeft = countdownDuration - timePassed;\n\n    useEffect(\n        () => () => {\n            stopTimer();\n        },\n        [stopTimer],\n    );\n\n    return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n    state?: ConfirmationProps['state'];\n    screen?: ConfirmationProps['screen'];\n    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n        blockSmsRetry ?? false,\n    );\n\n    return {\n        confirmationState,\n        confirmationScreen,\n        confirmationBlockSmsRetry,\n        setConfirmationState,\n        setConfirmationScreen,\n        setConfirmationBlockSmsRetry,\n    };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":"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"}

package/moderncssm/component.responsive.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ConfirmationProps } from './types';
+import { type FC } from 'react';
+import { type ConfirmationProps } from './types';
 export declare type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens' | 'breakpoint'> & {
     /**
      * Контрольная точка, с нее начинается desktop версия

package/moderncssm/component.responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.responsive.js","sources":["../src/component.responsive.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { ConfirmationDesktop } from './desktop';\nimport { ConfirmationMobile } from './mobile';\nimport { ConfirmationProps } from './types';\n\nexport type ResponsiveConfirmationProps = Omit<\n    ConfirmationProps,\n    'confirmationScreens' | 'breakpoint'\n> & {\n    /**\n     * Контрольная точка, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Значение по-умолчанию для хука useMatchMedia\n     * @deprecated Используйте client\n     */\n    defaultMatchMediaValue?: boolean | (() => boolean);\n};\n\nexport const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}) => {\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    return isDesktop ? (\n        <ConfirmationDesktop {...restProps} />\n    ) : (\n        <ConfirmationMobile breakpoint={breakpoint} {...restProps} />\n    );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,sBAAsB,GAAoC,CAAC,EACpE,UAAU,EACV,MAAM,EACN,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACf,KAAI;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,OAAO,SAAS,IACZ,oBAAC,mBAAmB,EAAA,EAAA,GAAK,SAAS,EAAA,CAAI,KAEtC,KAAC,CAAA,aAAA,CAAA,kBAAkB,EAAC,EAAA,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS,EAAI,CAAA,CAChE;AACL;;;;"}
+{"version":3,"file":"component.responsive.js","sources":["../src/component.responsive.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { ConfirmationDesktop } from './desktop';\nimport { ConfirmationMobile } from './mobile';\nimport { type ConfirmationProps } from './types';\n\nexport type ResponsiveConfirmationProps = Omit<\n    ConfirmationProps,\n    'confirmationScreens' | 'breakpoint'\n> & {\n    /**\n     * Контрольная точка, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Значение по-умолчанию для хука useMatchMedia\n     * @deprecated Используйте client\n     */\n    defaultMatchMediaValue?: boolean | (() => boolean);\n};\n\nexport const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}) => {\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    return isDesktop ? (\n        <ConfirmationDesktop {...restProps} />\n    ) : (\n        <ConfirmationMobile breakpoint={breakpoint} {...restProps} />\n    );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,sBAAsB,GAAoC,CAAC,EACpE,UAAU,EACV,MAAM,EACN,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACf,KAAI;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,OAAO,SAAS,IACZ,oBAAC,mBAAmB,EAAA,EAAA,GAAK,SAAS,EAAA,CAAI,KAEtC,KAAC,CAAA,aAAA,CAAA,kBAAkB,EAAC,EAAA,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS,EAAI,CAAA,CAChE;AACL;;;;"}

package/moderncssm/components/base-confirmation/component.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { ConfirmationProps } from '../../types';
+import { type FC } from 'react';
+import { type ConfirmationProps } from '../../types';
 export declare const BaseConfirmation: FC<ConfirmationProps>;

package/moderncssm/components/base-confirmation/component.js

@@ -18,7 +18,7 @@ const confirmationScreens = {
     TEMP_BLOCK: TempBlock,
     TEMP_BLOCK_OVER: TempBlockOver,
 };
-const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requiredCharAmount = 5, countdownDuration = ONE_MINUTE, tempBlockDuration = ONE_DAY, phone, blockSmsRetry, dataTestId, className, getScreensMap, onInputFinished, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, onTempBlockFinished, mobile, clearCodeOnError = true, hideCountdownSection = false, breakpoint, client, initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
+const BaseConfirmation = ({ state, screen, titleTag = 'h3', alignContent = 'left', children, requiredCharAmount = 5, countdownDuration = ONE_MINUTE, tempBlockDuration = ONE_DAY, phone, blockSmsRetry, dataTestId, className, getScreensMap, onInputFinished, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, onTempBlockFinished, mobile, clearCodeOnError = true, hideCountdownSection = false, breakpoint, client, initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
     const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
     const prevState = usePrevious(state);
     useEffect(() => {
@@ -58,6 +58,7 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
     const contextValue = {
         hideCountdownSection,
         alignContent,
+        titleTag,
         texts: { ...defaultTexts, ...restProps.texts },
         state,
         screen,
@@ -79,7 +80,7 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
         onSmsRetryClick: handleSmsRetry,
         onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
     };
-    const customScreen = useMemo(() => getScreensMap && getScreensMap(confirmationScreens), [getScreensMap]);
+    const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);
     const screensMap = customScreen || confirmationScreens;
     const CurrentScreen = screensMap[screen];
     return (React.createElement(ConfirmationContext.Provider, { value: contextValue },

package/moderncssm/components/base-confirmation/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { ComponentType, FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { ConfirmationProps, defaultTexts, TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n    INITIAL: Initial,\n    HINT: Hint,\n    FATAL_ERROR: FatalError,\n    TEMP_BLOCK: TempBlock,\n    TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n    state,\n    screen,\n    alignContent = 'left',\n    children,\n    requiredCharAmount = 5,\n    countdownDuration = ONE_MINUTE,\n    tempBlockDuration = ONE_DAY,\n    phone,\n    blockSmsRetry,\n    dataTestId,\n    className,\n    getScreensMap,\n    onInputFinished,\n    onChangeState,\n    onSmsRetryClick,\n    onChangeScreen,\n    onFatalErrorOkButtonClick,\n    onTempBlockFinished,\n    mobile,\n    clearCodeOnError = true,\n    hideCountdownSection = false,\n    breakpoint,\n    client,\n    initialScreenHintSlot,\n    errorVisibleDuration,\n    ...restProps\n}) => {\n    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n    const prevState = usePrevious(state);\n\n    useEffect(() => {\n        startTimer();\n    }, [startTimer]);\n\n    useEffect(() => {\n        /**\n         * Перезапускаем таймер после повторного запроса кода\n         */\n        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n            startTimer();\n        }\n    }, [state, prevState, startTimer]);\n\n    useEffect(() => {\n        /**\n         * Останавливаем таймер, если новый экран/состояние не содержит таймер\n         */\n        if (\n            !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n            blockSmsRetry\n        ) {\n            stopTimer();\n        }\n    }, [state, screen, blockSmsRetry, stopTimer]);\n\n    const handleSmsRetry = () => {\n        onChangeState('CODE_SENDING');\n\n        onSmsRetryClick();\n    };\n\n    const handleInputFinished = (code: string) => {\n        onChangeState('CODE_CHECKING');\n\n        onInputFinished(code);\n    };\n\n    const handleFatalErrorOkButtonClick = () => {\n        if (onFatalErrorOkButtonClick) {\n            onFatalErrorOkButtonClick();\n        }\n    };\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const contextValue: TConfirmationContext = {\n        hideCountdownSection,\n        alignContent,\n        texts: { ...defaultTexts, ...restProps.texts },\n        state,\n        screen,\n        requiredCharAmount,\n        countdownDuration,\n        timeLeft,\n        tempBlockDuration,\n        phone,\n        blockSmsRetry,\n        breakpoint,\n        client,\n        onTempBlockFinished,\n        onChangeState,\n        onChangeScreen,\n        clearCodeOnError,\n        errorVisibleDuration,\n        initialScreenHintSlot,\n        onInputFinished: handleInputFinished,\n        onSmsRetryClick: handleSmsRetry,\n        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n    };\n\n    const customScreen = useMemo(\n        () => getScreensMap && getScreensMap(confirmationScreens),\n        [getScreensMap],\n    );\n\n    const screensMap = customScreen || confirmationScreens;\n\n    const CurrentScreen = screensMap[screen];\n\n    return (\n        <ConfirmationContext.Provider value={contextValue}>\n            <div\n                className={cn(styles.component, className, {\n                    [styles.center]: alignContent === 'center',\n                })}\n                data-test-id={dataTestId}\n            >\n                {CurrentScreen && <CurrentScreen mobile={mobile} />}\n            </div>\n        </ConfirmationContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n    INITIAL: Initial,\n    HINT: Hint,\n    FATAL_ERROR: FatalError,\n    TEMP_BLOCK: TempBlock,\n    TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n    state,\n    screen,\n    titleTag = 'h3',\n    alignContent = 'left',\n    children,\n    requiredCharAmount = 5,\n    countdownDuration = ONE_MINUTE,\n    tempBlockDuration = ONE_DAY,\n    phone,\n    blockSmsRetry,\n    dataTestId,\n    className,\n    getScreensMap,\n    onInputFinished,\n    onChangeState,\n    onSmsRetryClick,\n    onChangeScreen,\n    onFatalErrorOkButtonClick,\n    onTempBlockFinished,\n    mobile,\n    clearCodeOnError = true,\n    hideCountdownSection = false,\n    breakpoint,\n    client,\n    initialScreenHintSlot,\n    errorVisibleDuration,\n    ...restProps\n}) => {\n    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n    const prevState = usePrevious(state);\n\n    useEffect(() => {\n        startTimer();\n    }, [startTimer]);\n\n    useEffect(() => {\n        /**\n         * Перезапускаем таймер после повторного запроса кода\n         */\n        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n            startTimer();\n        }\n    }, [state, prevState, startTimer]);\n\n    useEffect(() => {\n        /**\n         * Останавливаем таймер, если новый экран/состояние не содержит таймер\n         */\n        if (\n            !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n            blockSmsRetry\n        ) {\n            stopTimer();\n        }\n    }, [state, screen, blockSmsRetry, stopTimer]);\n\n    const handleSmsRetry = () => {\n        onChangeState('CODE_SENDING');\n\n        onSmsRetryClick();\n    };\n\n    const handleInputFinished = (code: string) => {\n        onChangeState('CODE_CHECKING');\n\n        onInputFinished(code);\n    };\n\n    const handleFatalErrorOkButtonClick = () => {\n        if (onFatalErrorOkButtonClick) {\n            onFatalErrorOkButtonClick();\n        }\n    };\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const contextValue: TConfirmationContext = {\n        hideCountdownSection,\n        alignContent,\n        titleTag,\n        texts: { ...defaultTexts, ...restProps.texts },\n        state,\n        screen,\n        requiredCharAmount,\n        countdownDuration,\n        timeLeft,\n        tempBlockDuration,\n        phone,\n        blockSmsRetry,\n        breakpoint,\n        client,\n        onTempBlockFinished,\n        onChangeState,\n        onChangeScreen,\n        clearCodeOnError,\n        errorVisibleDuration,\n        initialScreenHintSlot,\n        onInputFinished: handleInputFinished,\n        onSmsRetryClick: handleSmsRetry,\n        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n    };\n\n    const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);\n\n    const screensMap = customScreen || confirmationScreens;\n\n    const CurrentScreen = screensMap[screen];\n\n    return (\n        <ConfirmationContext.Provider value={contextValue}>\n            <div\n                className={cn(styles.component, className, {\n                    [styles.center]: alignContent === 'center',\n                })}\n                data-test-id={dataTestId}\n            >\n                {CurrentScreen && <CurrentScreen mobile={mobile} />}\n            </div>\n        </ConfirmationContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/base-confirmation/index.module.css

@@ -1,9 +1,10 @@
+
+
 .component {
     width: 100%;
     max-width: 388px;
-    color: var(--color-light-text-secondary)
+    color: var(--color-light-text-secondary);
 }
-
 .component.center {
         margin: var(--gap-0) auto;
     }

package/moderncssm/components/countdown-loader/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 declare type Props = {
     progress: number;
     className?: string;

package/moderncssm/components/countdown-loader/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/countdown-loader/component.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    progress: number; // 0-1\n    className?: string;\n};\n\nconst SIZE = 16;\nconst STROKE_WIDTH = 2;\n\nconst CENTER = SIZE / 2;\nconst RADIUS = CENTER - STROKE_WIDTH / 2;\n/** Длина окружности */\nconst CIRCUMFERENCE = Math.PI * RADIUS * 2;\n\nexport const CountdownLoader: FC<Props> = ({ progress, className }) => {\n    const value = Math.min(progress, 1);\n\n    const strokeDasharray = CIRCUMFERENCE.toFixed(2);\n    const strokeDashoffset = (value * CIRCUMFERENCE).toFixed(2);\n\n    return (\n        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} className={className}>\n            <circle\n                cx={CENTER}\n                cy={CENTER}\n                r={RADIUS}\n                strokeDasharray={strokeDasharray}\n                strokeDashoffset={strokeDashoffset}\n                transform={`rotate(-90 ${CENTER} ${CENTER})`}\n                className={styles.circle}\n            />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;AASA,MAAM,IAAI,GAAG,EAAE;AACf,MAAM,YAAY,GAAG,CAAC;AAEtB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC;AACvB,MAAM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,CAAC;AACxC;AACA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,GAAG,CAAC;AAE7B,MAAA,eAAe,GAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,QACI,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA,IAAA,EAAO,IAAI,CAAI,CAAA,EAAA,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAA;AAChF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,EAAI,MAAM,CAAG,CAAA,CAAA,EAC5C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA,CACA;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/countdown-loader/component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    progress: number; // 0-1\n    className?: string;\n};\n\nconst SIZE = 16;\nconst STROKE_WIDTH = 2;\n\nconst CENTER = SIZE / 2;\nconst RADIUS = CENTER - STROKE_WIDTH / 2;\n/** Длина окружности */\nconst CIRCUMFERENCE = Math.PI * RADIUS * 2;\n\nexport const CountdownLoader: FC<Props> = ({ progress, className }) => {\n    const value = Math.min(progress, 1);\n\n    const strokeDasharray = CIRCUMFERENCE.toFixed(2);\n    const strokeDashoffset = (value * CIRCUMFERENCE).toFixed(2);\n\n    return (\n        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} className={className}>\n            <circle\n                cx={CENTER}\n                cy={CENTER}\n                r={RADIUS}\n                strokeDasharray={strokeDasharray}\n                strokeDashoffset={strokeDashoffset}\n                transform={`rotate(-90 ${CENTER} ${CENTER})`}\n                className={styles.circle}\n            />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;AASA,MAAM,IAAI,GAAG,EAAE;AACf,MAAM,YAAY,GAAG,CAAC;AAEtB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC;AACvB,MAAM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,CAAC;AACxC;AACA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,GAAG,CAAC;AAE7B,MAAA,eAAe,GAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnC,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,QACI,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA,IAAA,EAAO,IAAI,CAAI,CAAA,EAAA,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAA;AAChF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,EAAI,MAAM,CAAG,CAAA,CAAA,EAC5C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA,CACA;AAEd;;;;"}

package/moderncssm/components/countdown-loader/index.module.css

@@ -1,3 +1,5 @@
+
+
 .circle {
     fill: transparent;
     stroke: var(--color-light-neutral-500);

package/moderncssm/components/header/component.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export declare type HeaderProps = {
     /**
      * Контент шапки
@@ -8,5 +8,10 @@ export declare type HeaderProps = {
      * Отображать в мобильной версии экран компонента
      */
     mobile?: boolean;
+    /**
+     * HTML тег для заголовка
+     * @default 'h3'
+     */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
 export declare const Header: FC<HeaderProps>;

package/moderncssm/components/header/component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { TitleDesktop } from '@alfalab/core-components-typography/moderncssm';
 import styles from './index.module.css';
 
-const Header = ({ mobile, children }) => (React.createElement(TitleDesktop, { className: cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile }), tag: 'h3', color: 'primary' }, children));
+const Header = ({ mobile, children, titleTag = 'h3' }) => (React.createElement(TitleDesktop, { className: cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile }), tag: titleTag, color: 'primary' }, children));
 
 export { Header };
 //# sourceMappingURL=component.js.map

package/moderncssm/components/header/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/header/component.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport cn from 'classnames';\n\nimport { TitleDesktop } from '@alfalab/core-components-typography';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const Header: FC<HeaderProps> = ({ mobile, children }) => (\n    <TitleDesktop\n        className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}\n        tag='h3'\n        color='primary'\n    >\n        {children}\n    </TitleDesktop>\n);\n"],"names":[],"mappings":";;;;;MAmBa,MAAM,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MACxD,KAAC,CAAA,aAAA,CAAA,YAAY,EACT,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,EAAE,CAAC,EACtF,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,SAAS,EAEd,EAAA,QAAQ,CACE;;;;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/header/component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode } from 'react';\nimport cn from 'classnames';\n\nimport { TitleDesktop } from '@alfalab/core-components-typography';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\n\nexport const Header: FC<HeaderProps> = ({ mobile, children, titleTag = 'h3' }) => (\n    <TitleDesktop\n        className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}\n        tag={titleTag}\n        color='primary'\n    >\n        {children}\n    </TitleDesktop>\n);\n"],"names":[],"mappings":";;;;;AAyBa,MAAA,MAAM,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,MACzE,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,EAAE,CAAC,EACtF,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,SAAS,EAEd,EAAA,QAAQ,CACE;;;;"}

package/moderncssm/components/header/index.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --confirmation-header-desktop-font-size: 22px;
     --confirmation-header-desktop-line-height: 26px;

package/moderncssm/components/screens/fatal-error/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare type FatalErrorProps = {
     /**
      * Отображать в мобильной версии экран компонента

package/moderncssm/components/screens/fatal-error/component.js

@@ -7,9 +7,9 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const FatalError = ({ mobile }) => {
-    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } = useContext(ConfirmationContext);
+    const { alignContent, titleTag, texts, onFatalErrorOkButtonClick, breakpoint, client } = useContext(ConfirmationContext);
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.fatalErrorTitle),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.fatalErrorTitle),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn({
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/moderncssm/components/screens/fatal-error/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/fatal-error/component.tsx"],"sourcesContent":["import React, { FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type FatalErrorProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const FatalError: FC<FatalErrorProps> = ({ mobile }) => {\n    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile}>{texts.fatalErrorTitle}</Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn({\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.fatalErrorDescription}\n            </Text>\n\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={onFatalErrorOkButtonClick}\n                className={styles.button}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.fatalErrorButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAkBa,UAAU,GAAwB,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,EAAE,GACxE,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;QACtD,KAAC,CAAA,aAAA,CAAA,MAAM,IAAC,MAAM,EAAE,MAAM,EAAG,EAAA,KAAK,CAAC,eAAe,CAAU;AAExD,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC;AACV,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,qBAAqB,CACzB;AAEP,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,yBAAyB,EAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,gBAAgB,CAClB,CACP;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/fatal-error/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type FatalErrorProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const FatalError: FC<FatalErrorProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onFatalErrorOkButtonClick, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.fatalErrorTitle}\n            </Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn({\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.fatalErrorDescription}\n            </Text>\n\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={onFatalErrorOkButtonClick}\n                className={styles.button}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.fatalErrorButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAkBa,UAAU,GAAwB,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,EAAE,GAClF,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,eAAe,CACjB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC;AACV,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,qBAAqB,CACzB;AAEP,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,yBAAyB,EAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,gBAAgB,CAClB,CACP;AAEd;;;;"}

package/moderncssm/components/screens/fatal-error/index.module.css

@@ -1,11 +1,11 @@
+
+
 :root {
     --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-primary)
-
-    /* header */
 }
 
 .component {

package/moderncssm/components/screens/hint/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare type HintProps = {
     /**
      * Отображать в мобильной версии экран компонента

package/moderncssm/components/screens/hint/component.js

@@ -9,14 +9,14 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const Hint = ({ mobile }) => {
-    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } = useContext(ConfirmationContext);
+    const { alignContent, titleTag, texts, onChangeScreen, onChangeState, breakpoint, client } = useContext(ConfirmationContext);
     const { domesticPhone = '', internationalPhone = '', hintButton } = texts;
     const handleReturnButtonClick = () => {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
     };
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.hintTitle),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.hintTitle),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/moderncssm/components/screens/hint/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/hint/component.tsx"],"sourcesContent":["import React, { FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { getPhoneHref } from '../../../utils';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type HintProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const Hint: FC<HintProps> = ({ mobile }) => {\n    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;\n\n    const handleReturnButtonClick = () => {\n        onChangeScreen('INITIAL');\n        onChangeState('INITIAL');\n    };\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile}>{texts.hintTitle}</Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintDescription}\n            </Text>\n\n            <div\n                className={cn(styles.phonesWrap, {\n                    [styles.phonesWrapMobile]: mobile,\n                })}\n            >\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(internationalPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {internationalPhone}\n                    </Link>\n                    <Text\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'В\\u00A0Москве и\\u00A0за\\u00A0границей'\n                            : ' \\u2014\\u00A0в\\u00A0Москве и\\u00A0за\\u00A0границей'}\n                    </Text>\n                </div>\n\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(domesticPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {domesticPhone}\n                    </Link>\n                    <Text\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'Для\\u00A0звонков по\\u00A0России'\n                            : ' \\u2014\\u00A0для звонков по\\u00A0России'}\n                    </Text>\n                </div>\n            </div>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintNotification}\n            </Text>\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={styles.hintButton}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {hintButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/hint/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { getPhoneHref } from '../../../utils';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type HintProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const Hint: FC<HintProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onChangeScreen, onChangeState, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;\n\n    const handleReturnButtonClick = () => {\n        onChangeScreen('INITIAL');\n        onChangeState('INITIAL');\n    };\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.hintTitle}\n            </Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintDescription}\n            </Text>\n\n            <div\n                className={cn(styles.phonesWrap, {\n                    [styles.phonesWrapMobile]: mobile,\n                })}\n            >\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(internationalPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {internationalPhone}\n                    </Link>\n                    <Text\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'В\\u00A0Москве и\\u00A0за\\u00A0границей'\n                            : ' \\u2014\\u00A0в\\u00A0Москве и\\u00A0за\\u00A0границей'}\n                    </Text>\n                </div>\n\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(domesticPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {domesticPhone}\n                    </Link>\n                    <Text\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'Для\\u00A0звонков по\\u00A0России'\n                            : ' \\u2014\\u00A0для звонков по\\u00A0России'}\n                    </Text>\n                </div>\n            </div>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintNotification}\n            </Text>\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={styles.hintButton}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {hintButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/screens/hint/index.module.css

@@ -1,17 +1,17 @@
+
+
 :root {
     --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-primary)
-
-    /* header */
 }
 
 .component {
     display: flex;
     flex-direction: column;
-    align-items: flex-start
+    align-items: flex-start;
 }
 
 .component span:last-of-type {
@@ -46,7 +46,7 @@
 }
 
 .phoneWrap {
-    margin-bottom: var(--gap-8)
+    margin-bottom: var(--gap-8);
 }
 
 .phoneWrap:last-child {

package/moderncssm/components/screens/initial/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare type InitialProps = {
     /**
      * Отображать в мобильной версии экран компонента

package/moderncssm/components/screens/initial/component.js

@@ -13,7 +13,7 @@ import styles from './index.module.css';
 
 const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
 const Initial = ({ mobile }) => {
-    const { state, alignContent, texts, requiredCharAmount, timeLeft, phone, clearCodeOnError, hideCountdownSection, initialScreenHintSlot, errorVisibleDuration, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
+    const { state, alignContent, titleTag, texts, requiredCharAmount, timeLeft, phone, clearCodeOnError, hideCountdownSection, initialScreenHintSlot, errorVisibleDuration, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
     const prevState = usePrevious(state);
     const inputRef = useRef(null);
     const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);
@@ -93,7 +93,7 @@ const Initial = ({ mobile }) => {
     const timePassed = timeLeft === 0;
     const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.title),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.title),
         phone ? (React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.phone, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/moderncssm/components/screens/initial/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport { BaseCodeInputProps, CustomInputRef } from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n    const {\n        state,\n        alignContent,\n        texts,\n        requiredCharAmount,\n        timeLeft,\n        phone,\n        clearCodeOnError,\n        hideCountdownSection,\n        initialScreenHintSlot,\n        errorVisibleDuration,\n        onChangeState,\n        onInputFinished,\n        onChangeScreen,\n        onSmsRetryClick,\n    } = useContext(ConfirmationContext);\n\n    const prevState = usePrevious(state);\n\n    const inputRef = useRef<CustomInputRef>(null);\n\n    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n    const timerId = useRef(0);\n\n    const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n        onInputFinished(code);\n    };\n\n    const handleSmsHintLinkClick = () => {\n        onChangeScreen('HINT');\n    };\n\n    const handleInputChange = () => {\n        if (state === 'CODE_ERROR') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const handleSmsRetryClick = () => {\n        if (inputRef.current) {\n            inputRef.current.reset();\n        }\n\n        onSmsRetryClick();\n    };\n\n    const handleErrorAnimationEnd = () => {\n        if (clearCodeOnError && state !== 'INITIAL') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const clearTimer = useCallback(() => {\n        window.clearTimeout(timerId.current);\n    }, []);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        return () => {\n            clearTimer();\n        };\n    }, [clearTimer]);\n\n    useEffect(() => {\n        if (!inputRef.current) {\n            return;\n        }\n\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            inputRef.current.focus();\n        }\n    }, [prevState, state, requiredCharAmount]);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            setCodeSendHintVisible(true);\n\n            clearTimer();\n\n            timerId.current = window.setTimeout(() => {\n                setCodeSendHintVisible(false);\n            }, CODE_SEND_HINT_VISIBLE_DURATION);\n        }\n    }, [prevState, state, clearTimer]);\n\n    const getCodeInputError = (): string | boolean => {\n        if (state === 'CODE_EXPIRED') {\n            return texts.codeErrorExpired || true;\n        }\n\n        if (state === 'CODE_EXPIRED_ENDED') {\n            return texts.codeErrorExpiredEnded || true;\n        }\n\n        if (state === 'CODE_ERROR') {\n            return texts.codeError || true;\n        }\n\n        return false;\n    };\n\n    const renderHintButton = () => {\n        if (initialScreenHintSlot) {\n            return initialScreenHintSlot;\n        }\n\n        if (mobile) {\n            return (\n                <ButtonMobile\n                    onClick={handleSmsHintLinkClick}\n                    className={styles.smsBtn}\n                    view='text'\n                    size='xs'\n                >\n                    {texts.linkToHint}\n                </ButtonMobile>\n            );\n        }\n\n        return (\n            <Link\n                onClick={handleSmsHintLinkClick}\n                className={styles.smsComeLink}\n                view={mobile ? 'primary' : 'secondary'}\n                pseudo={true}\n            >\n                {texts.linkToHint}\n            </Link>\n        );\n    };\n\n    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n    const timePassed = timeLeft === 0;\n\n    const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile}>{texts.title}</Header>\n\n            {phone ? (\n                <Text\n                    view='primary-medium'\n                    color='primary'\n                    className={cn(styles.phone, {\n                        [styles.typographyTheme]: !mobile,\n                        [styles.typographyThemeMobile]: mobile,\n                    })}\n                >\n                    Отправили на {phone}\n                </Text>\n            ) : null}\n            <ComponentCodeInput\n                disabled={processing}\n                error={getCodeInputError()}\n                ref={inputRef}\n                fields={requiredCharAmount}\n                className={cn(styles.containerInput, styles.codeInput)}\n                onComplete={handleInputComplete}\n                onChange={handleInputChange}\n                clearCodeOnError={clearCodeOnError}\n                errorVisibleDuration={errorVisibleDuration}\n                onErrorAnimationEnd={handleErrorAnimationEnd}\n            />\n            {!hideCountdownSection && (\n                <CountdownSection\n                    processing={processing}\n                    timePassed={timePassed}\n                    codeSendHintVisible={codeSendHintVisible}\n                    handleSmsRetryClick={handleSmsRetryClick}\n                    mobile={mobile}\n                />\n            )}\n\n            {renderHintButton()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n    type BaseCodeInputProps,\n    type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n    const {\n        state,\n        alignContent,\n        titleTag,\n        texts,\n        requiredCharAmount,\n        timeLeft,\n        phone,\n        clearCodeOnError,\n        hideCountdownSection,\n        initialScreenHintSlot,\n        errorVisibleDuration,\n        onChangeState,\n        onInputFinished,\n        onChangeScreen,\n        onSmsRetryClick,\n    } = useContext(ConfirmationContext);\n\n    const prevState = usePrevious(state);\n\n    const inputRef = useRef<CustomInputRef>(null);\n\n    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n    const timerId = useRef(0);\n\n    const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n        onInputFinished(code);\n    };\n\n    const handleSmsHintLinkClick = () => {\n        onChangeScreen('HINT');\n    };\n\n    const handleInputChange = () => {\n        if (state === 'CODE_ERROR') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const handleSmsRetryClick = () => {\n        if (inputRef.current) {\n            inputRef.current.reset();\n        }\n\n        onSmsRetryClick();\n    };\n\n    const handleErrorAnimationEnd = () => {\n        if (clearCodeOnError && state !== 'INITIAL') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const clearTimer = useCallback(() => {\n        window.clearTimeout(timerId.current);\n    }, []);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        return () => {\n            clearTimer();\n        };\n    }, [clearTimer]);\n\n    useEffect(() => {\n        if (!inputRef.current) {\n            return;\n        }\n\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            inputRef.current.focus();\n        }\n    }, [prevState, state, requiredCharAmount]);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            setCodeSendHintVisible(true);\n\n            clearTimer();\n\n            timerId.current = window.setTimeout(() => {\n                setCodeSendHintVisible(false);\n            }, CODE_SEND_HINT_VISIBLE_DURATION);\n        }\n    }, [prevState, state, clearTimer]);\n\n    const getCodeInputError = (): string | boolean => {\n        if (state === 'CODE_EXPIRED') {\n            return texts.codeErrorExpired || true;\n        }\n\n        if (state === 'CODE_EXPIRED_ENDED') {\n            return texts.codeErrorExpiredEnded || true;\n        }\n\n        if (state === 'CODE_ERROR') {\n            return texts.codeError || true;\n        }\n\n        return false;\n    };\n\n    const renderHintButton = () => {\n        if (initialScreenHintSlot) {\n            return initialScreenHintSlot;\n        }\n\n        if (mobile) {\n            return (\n                <ButtonMobile\n                    onClick={handleSmsHintLinkClick}\n                    className={styles.smsBtn}\n                    view='text'\n                    size='xs'\n                >\n                    {texts.linkToHint}\n                </ButtonMobile>\n            );\n        }\n\n        return (\n            <Link\n                onClick={handleSmsHintLinkClick}\n                className={styles.smsComeLink}\n                view={mobile ? 'primary' : 'secondary'}\n                pseudo={true}\n            >\n                {texts.linkToHint}\n            </Link>\n        );\n    };\n\n    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n    const timePassed = timeLeft === 0;\n\n    const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.title}\n            </Header>\n\n            {phone ? (\n                <Text\n                    view='primary-medium'\n                    color='primary'\n                    className={cn(styles.phone, {\n                        [styles.typographyTheme]: !mobile,\n                        [styles.typographyThemeMobile]: mobile,\n                    })}\n                >\n                    Отправили на {phone}\n                </Text>\n            ) : null}\n            <ComponentCodeInput\n                disabled={processing}\n                error={getCodeInputError()}\n                ref={inputRef}\n                fields={requiredCharAmount}\n                className={cn(styles.containerInput, styles.codeInput)}\n                onComplete={handleInputComplete}\n                onChange={handleInputChange}\n                clearCodeOnError={clearCodeOnError}\n                errorVisibleDuration={errorVisibleDuration}\n                onErrorAnimationEnd={handleErrorAnimationEnd}\n            />\n            {!hideCountdownSection && (\n                <CountdownSection\n                    processing={processing}\n                    timePassed={timePassed}\n                    codeSendHintVisible={codeSendHintVisible}\n                    handleSmsRetryClick={handleSmsRetryClick}\n                    mobile={mobile}\n                />\n            )}\n\n            {renderHintButton()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/screens/initial/countdown-section.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 declare type CountdownSectionProps = {
     codeSendHintVisible: boolean;
     timePassed: boolean;

package/moderncssm/components/screens/initial/countdown-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { FC, Fragment, ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n    codeSendHintVisible: boolean;\n    timePassed: boolean;\n    processing: boolean;\n    mobile?: boolean;\n    handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n    codeSendHintVisible,\n    timePassed,\n    processing,\n    mobile,\n    handleSmsRetryClick,\n}) => {\n    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const renderText = (content: ReactNode) => (\n        <Text\n            className={cn(styles.countdownContainer, {\n                [styles.countdownMobile]: mobile,\n                [styles.typographyTheme]: !mobile,\n            })}\n            view={mobile ? 'primary-small' : 'primary-medium'}\n            tag='div'\n        >\n            {content}\n        </Text>\n    );\n\n    if (codeSendHintVisible) return renderText(texts.codeSended);\n\n    if (processing) {\n        return (\n            <div\n                className={cn(styles.loaderWrap, styles.countdownContainer, {\n                    [styles.countdownLoaderMobile]: mobile,\n                    [styles.typographyTheme]: !mobile,\n                })}\n            >\n                <Spinner preset={24} visible={true} />\n\n                <span className={styles.loaderText}>\n                    {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n                </span>\n            </div>\n        );\n    }\n\n    if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n    if (timePassed) {\n        return (\n            <Button\n                size={mobile ? 'xs' : 'xxs'}\n                view='secondary'\n                onClick={handleSmsRetryClick}\n                className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.buttonRetry}\n            </Button>\n        );\n    }\n\n    return renderText(\n        <Fragment>\n            {texts.countdown}\n            {'\\u00A0'}\n            <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n        </Fragment>,\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACL,CACV;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;AAEb;AAED,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;AAE1D,IAAA,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,EAC3B,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;AAEhB;IAED,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}
+{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n    codeSendHintVisible: boolean;\n    timePassed: boolean;\n    processing: boolean;\n    mobile?: boolean;\n    handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n    codeSendHintVisible,\n    timePassed,\n    processing,\n    mobile,\n    handleSmsRetryClick,\n}) => {\n    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const renderText = (content: ReactNode) => (\n        <Text\n            className={cn(styles.countdownContainer, {\n                [styles.countdownMobile]: mobile,\n                [styles.typographyTheme]: !mobile,\n            })}\n            view={mobile ? 'primary-small' : 'primary-medium'}\n            tag='div'\n        >\n            {content}\n        </Text>\n    );\n\n    if (codeSendHintVisible) return renderText(texts.codeSended);\n\n    if (processing) {\n        return (\n            <div\n                className={cn(styles.loaderWrap, styles.countdownContainer, {\n                    [styles.countdownLoaderMobile]: mobile,\n                    [styles.typographyTheme]: !mobile,\n                })}\n            >\n                <Spinner preset={24} visible={true} />\n\n                <span className={styles.loaderText}>\n                    {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n                </span>\n            </div>\n        );\n    }\n\n    if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n    if (timePassed) {\n        return (\n            <Button\n                size={mobile ? 'xs' : 'xxs'}\n                view='secondary'\n                onClick={handleSmsRetryClick}\n                className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.buttonRetry}\n            </Button>\n        );\n    }\n\n    return renderText(\n        <Fragment>\n            {texts.countdown}\n            {'\\u00A0'}\n            <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n        </Fragment>,\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACL,CACV;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;AAEb;AAED,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;AAE1D,IAAA,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,EAC3B,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;AAEhB;IAED,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}