@alfalab/core-components-confirmation 9.0.7 → 10.0.0

package/dist/modern/utils.js

@@ -0,0 +1,74 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+    const seconds = totalSeconds % 60;
+    const paddedSeconds = `00${seconds}`.slice(-2);
+    if (totalHours > 0) {
+        const minutes = totalMinutes % 60;
+        const paddedMinutes = `00${minutes}`.slice(-2);
+        const paddedHours = `00${totalHours}`.slice(-2);
+        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+    }
+    const paddedMinutes = `00${totalMinutes}`.slice(-2);
+    return `${paddedMinutes}:${paddedSeconds}`;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+const useCountdown = (countdownDuration, tick = 1000) => {
+    const timerId = useRef(0);
+    const start = useRef(0);
+    const [timePassed, setTimePassed] = useState(0);
+    const stopTimer = useCallback(() => {
+        window.clearInterval(timerId.current);
+    }, []);
+    const updateProgress = useCallback(() => {
+        const passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    const startTimer = useCallback(() => {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    const timeLeft = countdownDuration - timePassed;
+    useEffect(() => {
+        return () => {
+            stopTimer();
+        };
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+const ONE_DAY = 24 * 60 * 60 * 1000;
+const ONE_MINUTE = 60 * 1000;
+const useConfirmation = ({ state, screen, blockSmsRetry } = {}) => {
+    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');
+    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');
+    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(blockSmsRetry ?? false);
+    return {
+        confirmationState,
+        confirmationScreen,
+        confirmationBlockSmsRetry,
+        setConfirmationState,
+        setConfirmationScreen,
+        setConfirmationBlockSmsRetry,
+    };
+};
+
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown };

package/dist/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeState: (state: ConfirmationState | string) => void;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeScreen: (state: ConfirmationScreen | string) => void;
+    /**
+     * Обработчик события завершения ввода кода подписания
+     */
+    onInputFinished: (code: string) => void;
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код"
+     */
+    onSmsRetryClick: () => void;
+    /**
+     * Клик по кнопке "Понятно" на экране фатальной ошибки
+     */
+    onFatalErrorOkButtonClick?: () => void;
+    /**
+     * Временная блокировка формы закончилась
+     */
+    onTempBlockFinished?: () => void;
+    /**
+     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     */
+    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
+    timeLeft: number;
+};
+type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode;
+    codeError?: string;
+    codeChecking?: string;
+    codeSending?: string;
+    codeSended?: string;
+    buttonRetry?: string;
+    linkToHint?: string;
+    noAttemptsLeft?: string;
+    countdown?: string;
+    /**
+     * Экран HINT
+     */
+    hintButton?: string;
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode;
+    fatalErrorDescription?: ReactNode;
+    fatalErrorButton?: string;
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode;
+    tempBlockDescription?: ReactNode;
+};
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ScreensMap = {
+    [key: string]: ComponentType;
+};
+declare const defaultTexts: {
+    title: string;
+    codeError: string;
+    codeChecking: string;
+    codeSending: string;
+    buttonRetry: string;
+    linkToHint: string;
+    hintButton: string;
+    noAttemptsLeft: string;
+    fatalErrorTitle: string;
+    fatalErrorDescription: string;
+    fatalErrorButton: string;
+    tempBlockTitle: string;
+    tempBlockDescription: string;
+    codeSended: string;
+    countdown: string;
+};
+export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/dist/types.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultTexts = {
+    title: 'Введите код из\xa0сообщения',
+    codeError: 'Код введён неверно',
+    codeChecking: '',
+    codeSending: '',
+    buttonRetry: 'Запросить код повторно',
+    linkToHint: 'Не\xa0приходит сообщение?',
+    hintButton: 'Вернуться к\xa0вводу кода',
+    noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
+    fatalErrorTitle: 'Ввести код больше нельзя',
+    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorButton: 'Понятно',
+    tempBlockTitle: 'Превышено количество попыток запроса кода',
+    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
+    codeSended: 'Код выслан',
+    countdown: 'Запросить повторно можно через',
+};
+
+exports.defaultTexts = defaultTexts;

package/dist/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/dist/utils.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    var totalSeconds = Math.ceil(ms / 1000);
+    var totalMinutes = Math.floor(totalSeconds / 60);
+    var totalHours = Math.floor(totalMinutes / 60);
+    var seconds = totalSeconds % 60;
+    var paddedSeconds = ("00" + seconds).slice(-2);
+    if (totalHours > 0) {
+        var minutes = totalMinutes % 60;
+        var paddedMinutes_1 = ("00" + minutes).slice(-2);
+        var paddedHours = ("00" + totalHours).slice(-2);
+        return paddedHours + ":" + paddedMinutes_1 + ":" + paddedSeconds;
+    }
+    var paddedMinutes = ("00" + totalMinutes).slice(-2);
+    return paddedMinutes + ":" + paddedSeconds;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+var useCountdown = function (countdownDuration, tick) {
+    if (tick === void 0) { tick = 1000; }
+    var timerId = React.useRef(0);
+    var start = React.useRef(0);
+    var _a = React.useState(0), timePassed = _a[0], setTimePassed = _a[1];
+    var stopTimer = React.useCallback(function () {
+        window.clearInterval(timerId.current);
+    }, []);
+    var updateProgress = React.useCallback(function () {
+        var passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    var startTimer = React.useCallback(function () {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    var timeLeft = countdownDuration - timePassed;
+    React.useEffect(function () {
+        return function () {
+            stopTimer();
+        };
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+var ONE_DAY = 24 * 60 * 60 * 1000;
+var ONE_MINUTE = 60 * 1000;
+var useConfirmation = function (_a) {
+    var _b = _a === void 0 ? {} : _a, state = _b.state, screen = _b.screen, blockSmsRetry = _b.blockSmsRetry;
+    var _c = React.useState(state !== null && state !== void 0 ? state : 'INITIAL'), confirmationState = _c[0], setConfirmationState = _c[1];
+    var _d = React.useState(screen !== null && screen !== void 0 ? screen : 'INITIAL'), confirmationScreen = _d[0], setConfirmationScreen = _d[1];
+    var _e = React.useState(blockSmsRetry !== null && blockSmsRetry !== void 0 ? blockSmsRetry : false), confirmationBlockSmsRetry = _e[0], setConfirmationBlockSmsRetry = _e[1];
+    return {
+        confirmationState: confirmationState,
+        confirmationScreen: confirmationScreen,
+        confirmationBlockSmsRetry: confirmationBlockSmsRetry,
+        setConfirmationState: setConfirmationState,
+        setConfirmationScreen: setConfirmationScreen,
+        setConfirmationBlockSmsRetry: setConfirmationBlockSmsRetry,
+    };
+};
+
+exports.ONE_DAY = ONE_DAY;
+exports.ONE_MINUTE = ONE_MINUTE;
+exports.formatMsAsMinutes = formatMsAsMinutes;
+exports.useConfirmation = useConfirmation;
+exports.useCountdown = useCountdown;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "9.0.7",
+    "version": "10.0.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -17,6 +17,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-button": "^5.1.1",
+        "@alfalab/core-components-code-input": "^1.1.0",
         "@alfalab/core-components-link": "^3.2.1",
         "@alfalab/core-components-loader": "^2.0.2",
         "@alfalab/hooks": "^1.4.1",
@@ -27,5 +28,5 @@
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1"
     },
-    "gitHead": "07e0a3991a53623ef78766790ea2c1b06049f31f"
+    "gitHead": "fe7b54ff82e4f2933502e522ea7a5319057cb50f"
 }

package/dist/components/code-input/component.d.ts

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

package/dist/components/code-input/component.js

@@ -1,160 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
-var components_codeInput_utils = require('./utils.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-        s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
-var styles = {"component":"confirmation__component_1s527","input":"confirmation__input_1s527","hasError":"confirmation__hasError_1s527","center":"confirmation__center_1s527","disabled":"confirmation__disabled_1s527","compact":"confirmation__compact_1s527","shake":"confirmation__shake_1s527"};
-require('./index.css')
-
-var Input = function (_a) {
-    var _b;
-    var index = _a.index, slotsCount = _a.slotsCount, error = _a.error, processing = _a.processing, value = _a.value, alignContent = _a.alignContent, handleChange = _a.handleChange, handleInputKeyDown = _a.handleInputKeyDown, setRef = _a.setRef, focus = _a.focus;
-    var splittedValue = value.split('');
-    var inputRef = React.useRef(null);
-    var onChange = function (event) {
-        var targetValue = event.target.value;
-        if (/^\d$/.test(targetValue)) {
-            var newValues = __spreadArrays(splittedValue);
-            newValues[index] = targetValue;
-            handleChange(newValues.join(''));
-        }
-        else if (/^\d{1,}$/.test(targetValue) && index !== slotsCount - 1) {
-            /*
-             * если пользователь хочет ввести более 1 цифры в инпут,
-             * то предполагаем, что это вставка кода (например, из смс)
-             */
-            var newValues = components_codeInput_utils.mergeArrays({
-                sourceArray: splittedValue,
-                targetArray: targetValue.split(''),
-                startIndex: index,
-                resultArrayLength: slotsCount,
-            });
-            handleChange(newValues.join(''));
-        }
-    };
-    var onInputKeyDown = function (event) {
-        var key = event.key;
-        var newValues = __spreadArrays(splittedValue);
-        switch (key) {
-            case 'Backspace':
-            case 'Delete':
-                newValues[index] = '';
-                handleChange(newValues.join('').trim());
-                if (index !== 0) {
-                    focus(index - 1);
-                }
-                break;
-            case 'ArrowRight':
-                if (index !== slotsCount - 1) {
-                    focus(index + 1);
-                }
-                break;
-            case 'ArrowLeft':
-                if (index !== 0) {
-                    focus(index - 1);
-                }
-                break;
-            case 'Home':
-                focus(0);
-                break;
-            case 'End':
-                focus(slotsCount - 1);
-                break;
-        }
-        handleInputKeyDown(event);
-    };
-    var handleRef = function (node) {
-        inputRef.current = node;
-        setRef({ node: node, index: index });
-    };
-    return (React__default['default'].createElement("input", { className: cn__default['default'](styles.input, styles[alignContent], (_b = {},
-            _b[styles.hasError] = error,
-            _b[styles.disabled] = processing,
-            _b)), disabled: processing, value: splittedValue[index] || '', autoComplete: index === 0 ? 'one-time-code' : '', inputMode: 'numeric', pattern: '[0-9]*', onChange: onChange, onKeyDown: onInputKeyDown, ref: handleRef }));
-};
-var CodeInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var processing = _a.processing, _c = _a.value, value = _c === void 0 ? '' : _c, slotsCount = _a.slotsCount, error = _a.error, handleInputKeyDown = _a.handleInputKeyDown, handleChange = _a.handleChange, className = _a.className, alignContent = _a.alignContent;
-    var inputs = React.useRef([]);
-    React.useImperativeHandle(ref, function () { return inputs.current[0]; });
-    var prevValue = hooks.usePrevious(value) || '';
-    var focus = React.useCallback(function (index) {
-        var input = inputs.current[index];
-        if (input) {
-            input.focus();
-            input.setSelectionRange(1, 1);
-        }
-    }, []);
-    var setRef = React.useCallback(function (_a) {
-        var node = _a.node, index = _a.index;
-        inputs.current[index] = node;
-    }, []);
-    /**
-     * Устанавливаем фокус на инпуте:
-     * 1) если код введен неверно
-     * 2) по нажатию кнопки 'Запросить код'
-     */
-    React.useEffect(function () {
-        var inputIndex = value.length === slotsCount ? value.length - 1 : value.length;
-        var needFocus = !processing || error;
-        if (needFocus && value.length === prevValue.length) {
-            focus(inputIndex);
-        }
-    }, [focus, error, slotsCount, value.length, prevValue.length, processing]);
-    React.useEffect(function () {
-        if (value.length > prevValue.length && value.length < slotsCount) {
-            /**
-             * Если value.length увеличился - ставим фокус на следующем инпуте
-             */
-            var nextInputIndex = value.length;
-            focus(nextInputIndex);
-        }
-        else if (value.length <= prevValue.length && value.length > 0) {
-            /**
-             * Если value.length уменьшился - ставим фокус на предыдущем инпуте
-             */
-            var nextInputIndex = value.length - 1;
-            focus(nextInputIndex);
-        }
-    }, [value.length, prevValue.length, slotsCount, focus]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
-            _b[styles.shake] = Boolean(error),
-            _b[styles.compact] = slotsCount > 6,
-            _b)) }, new Array(slotsCount).fill('').map(function (_, index) { return (React__default['default'].createElement(Input, { value: value, index: index, error: error, processing: processing, slotsCount: slotsCount, alignContent: alignContent, handleChange: handleChange, handleInputKeyDown: handleInputKeyDown, setRef: setRef, focus: focus, 
-        // eslint-disable-next-line react/no-array-index-key
-        key: index })); })));
-});
-
-exports.CodeInput = CodeInput;

package/dist/components/code-input/index.css

@@ -1,99 +0,0 @@
-/* hash: 19upi */
-:root {
-    --color-light-bg-negative-muted: #feebea;
-    --color-light-bg-secondary: #f3f4f5;
-    --color-light-text-negative: #d91d0b;
-    --color-light-text-primary: #0b1f35;
-    --color-light-text-tertiary: #b6bcc3;
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-}
-:root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-}
-:root {
-    --border-radius-s: 4px;
-}
-:root {
-    /* title */
-
-    /* text */
-
-    /* error */
-    --confirmation-error-color: var(--color-light-text-negative);
-
-    /* input */
-    --confirmation-input-font-size: 30px;
-    --confirmation-input-font-weight: 700;
-    --confirmation-input-font-family: var(--font-family-system);
-    --confirmation-input-text-color: var(--color-light-text-primary);
-    --confirmation-input-bg-color: var(--color-light-bg-secondary);
-    --confirmation-input-error-bg-color: var(--color-light-bg-negative-muted);
-}
-.confirmation__component_1s527 {
-    display: flex;
-}
-.confirmation__input_1s527 {
-    flex-shrink: 0;
-    width: 36px;
-    height: 48px;
-    margin-right: var(--gap-xs);
-    padding: 0;
-    background-color: var(--confirmation-input-bg-color);
-    border: none;
-    border-radius: var(--border-radius-s);
-    box-sizing: border-box;
-    outline: none;
-    color: var(--confirmation-input-text-color);
-    text-align: center;
-    font-size: var(--confirmation-input-font-size);
-    font-weight: var(--confirmation-input-font-weight);
-    font-family: var(--confirmation-input-font-family)
-}
-.confirmation__input_1s527.confirmation__hasError_1s527 {
-        color: var(--confirmation-error-color);
-        caret-color: var(--confirmation-input-text-color);
-        background-color: var(--confirmation-input-error-bg-color);
-    }
-.confirmation__input_1s527.confirmation__center_1s527 {
-        margin: 0 var(--gap-2xs);
-    }
-.confirmation__input_1s527.confirmation__disabled_1s527 {
-        color: var(--color-light-text-tertiary);
-        opacity: 1;
-    }
-.confirmation__compact_1s527 .confirmation__input_1s527 {
-    width: 28px;
-    height: 40px;
-}
-@keyframes confirmation__shake_1s527 {
-    0% {
-        transform: translateX(0);
-    }
-
-    25% {
-        transform: translateX(-2px);
-    }
-
-    75% {
-        transform: translateX(2px);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-.confirmation__shake_1s527 {
-    animation: confirmation__shake_1s527 0.15s linear 0s 3;
-}

package/dist/components/code-input/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-var components_codeInput_component = require('./component.js');
-require('./utils.js');
-
-
-
-exports.CodeInput = components_codeInput_component.CodeInput;

package/dist/components/code-input/utils.d.ts

@@ -1,10 +0,0 @@
-/**
- * Начиная с указанного индекса, заменяет элементы исходного массива
- */
-declare const mergeArrays: ({ sourceArray, targetArray, startIndex, resultArrayLength, }: {
-    sourceArray: string[];
-    targetArray: string[];
-    startIndex: number;
-    resultArrayLength: number;
-}) => string[];
-export { mergeArrays };