@alfalab/core-components 47.12.1-beta.0 → 47.12.1-beta.1

package/number-input/moderncssm/mobile/index.js

@@ -1,20 +0,0 @@
-export { NumberInputMobile } from './Component.mobile.js';
-import 'react';
-import '../../../input/moderncssm/mobile';
-import '../components/number-input/Component.js';
-import 'react-merge-refs';
-import '@maskito/core';
-import '@maskito/react';
-import 'classnames';
-import '../../../shared/moderncssm';
-import '../utils.js';
-import '../components/steppers/Component.js';
-import '../../../icon-button/moderncssm';
-import '@alfalab/icons-glyph/MinusMIcon';
-import '@alfalab/icons-glyph/PlusMediumMIcon';
-import '../components/steppers/default.module.css';
-import '../components/steppers/index.module.css';
-import '../components/steppers/inverted.module.css';
-import '../components/number-input/default.module.css';
-import '../components/number-input/index.module.css';
-import '../components/number-input/inverted.module.css';

package/number-input/moderncssm/shared/index.d.ts

@@ -1 +0,0 @@
-export { getNumberInputTestIds } from "../utils";

package/number-input/moderncssm/shared/index.js

@@ -1,3 +0,0 @@
-export { getNumberInputTestIds } from '../utils.js';
-import '@maskito/core';
-import '../../../shared/moderncssm';

package/number-input/moderncssm/utils.d.ts

@@ -1,34 +0,0 @@
-import { MaskitoOptions, MaskitoPlugin } from '@maskito/core';
-declare const MINUS_SIGN = "-";
-declare const SEPARATORS: string[];
-declare const MAX_SAFE_INTEGER: number;
-declare const MIN_SAFE_INTEGER: number;
-declare const MAX_DIGITS = 15;
-declare function parseNumber(value?: string | number | null): number;
-/**
- * Преобразовать число в строку с заменой экспоненты на десятичную дробь
- */
-declare function stringifyNumberWithoutExp(value: number): string;
-declare function createMaskOptions({ separator, fractionLength, min, max, }: {
-    separator: string;
-    fractionLength: number;
-    min: number;
-    max: number;
-}): MaskitoOptions;
-declare function createMinMaxPlugin({ min, max }: {
-    min: number;
-    max: number;
-}): MaskitoPlugin;
-declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
-declare function getNumberInputTestIds(dataTestId: string): {
-    input: string;
-    inputWrapper: string;
-    inputWrapperInner: string;
-    leftAddons: string;
-    rightAddons: string;
-    error: string;
-    hint: string;
-    decrementButton: string;
-    incrementButton: string;
-};
-export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds };

package/number-input/moderncssm/utils.js

@@ -1,246 +0,0 @@
-import { maskitoTransform } from '@maskito/core';
-import { getDataTestId, fnUtils } from '../../shared/moderncssm';
-
-/* eslint-disable no-param-reassign */
-const MINUS_SIGN = '-';
-const SEPARATORS = [',', '.'];
-const MAX_SAFE_INTEGER = 2 ** 53 - 1;
-const MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
-const MAX_DIGITS = 15; // с 16 уже упираемся в MAX_SAFE_INTEGER
-function parseNumber(value = '') {
-    if (typeof value === 'number')
-        return value;
-    const pseudoSeparatorsRegExp = new RegExp(`[${SEPARATORS.join('')}]`, 'gi');
-    return value
-        ? parseFloat(value
-            .replace(new RegExp(`[^${MINUS_SIGN}${SEPARATORS.join('')}0-9]`, 'gi'), '')
-            .replace(pseudoSeparatorsRegExp, '.'))
-        : NaN;
-}
-/**
- * Преобразовать число в строку с заменой экспоненты на десятичную дробь
- */
-function stringifyNumberWithoutExp(value) {
-    const valueString = String(value);
-    const [numberPart, expPart] = valueString.split('e-');
-    let valueWithoutExp = valueString;
-    if (expPart) {
-        const [, fractionalPart] = numberPart.split('.');
-        const decimalDigits = Number(expPart) + (fractionalPart?.length || 0);
-        valueWithoutExp = value.toFixed(decimalDigits);
-    }
-    return valueWithoutExp;
-}
-const getNumberRegExp = (min, fractionLength) => {
-    let reStr = '[0-9]*';
-    if (min < 0) {
-        reStr = `(\\${MINUS_SIGN})?${reStr}`;
-    }
-    if (fractionLength !== 0) {
-        reStr = `${reStr}[${SEPARATORS.map((s) => `\\${s}`).join('')}]?[0-9]{0,${fractionLength || MAX_DIGITS}}`;
-    }
-    return new RegExp(`^${reStr}$`);
-};
-function createMaskOptions({ separator, fractionLength, min, max, }) {
-    return {
-        mask: getNumberRegExp(min, fractionLength),
-        preprocessors: [
-            createPseudoSeparatorPreprocessor(separator),
-            createNotEmptyIntegerPartPreprocessor({ separator, fractionLength }),
-            createZeroFractionLengthPreprocessor(fractionLength, separator),
-            createRepeatedSeparatorPreprocessor(separator),
-        ],
-        postprocessors: [
-            createLeadingZeroesValidationPostprocessor(separator),
-            createMinMaxPostprocessor({ min, max, separator }),
-        ],
-        plugins: [createNotEmptyPartsPlugin(separator), createMinMaxPlugin({ min, max })],
-    };
-}
-/**
- *  Заполняет целочисленную часть при вводе separator.
- *  @example Type , => 0,
- */
-function createNotEmptyIntegerPartPreprocessor({ separator, fractionLength, }) {
-    const startWithDecimalSepRegExp = new RegExp(`^\\D*\\${separator}`);
-    return ({ elementState, data }) => {
-        const { value, selection } = elementState;
-        const [from] = selection;
-        if (fractionLength <= 0 ||
-            value.includes(separator) ||
-            !data.match(startWithDecimalSepRegExp)) {
-            return { elementState, data };
-        }
-        const digitsBeforeCursor = value.slice(0, from).match(/\d+/);
-        return {
-            elementState,
-            data: digitsBeforeCursor ? data : `0${data}`,
-        };
-    };
-}
-/**
- * Не позволяет вводить невалидный разделитель.
- */
-function createPseudoSeparatorPreprocessor(separator) {
-    const pseudoSeparatorsRegExp = new RegExp(`[${SEPARATORS.join('')}]`, 'gi');
-    return ({ elementState, data }) => {
-        const { value, selection } = elementState;
-        return {
-            elementState: {
-                selection,
-                value: value.replace(pseudoSeparatorsRegExp, separator),
-            },
-            data: data.replace(pseudoSeparatorsRegExp, separator),
-        };
-    };
-}
-/**
- * Помогает верно обрезать значения при вставке, если fractionLength===0
- * @example paste 123,123 -> 123
- */
-function createZeroFractionLengthPreprocessor(fractionLength, separator) {
-    if (fractionLength > 0) {
-        return (state) => state;
-    }
-    const decimalPartRegExp = new RegExp(`\\${separator}.*$`, 'g');
-    return ({ elementState, data }) => {
-        const { value, selection } = elementState;
-        const [from, to] = selection;
-        const newValue = value.replace(decimalPartRegExp, '');
-        return {
-            elementState: {
-                selection: [Math.min(from, newValue.length), Math.min(to, newValue.length)],
-                value: newValue,
-            },
-            data: data.replace(decimalPartRegExp, ''),
-        };
-    };
-}
-/**
- *  Запрещает вводить второй сепаратор
- */
-function createRepeatedSeparatorPreprocessor(separator) {
-    return ({ elementState, data }) => {
-        const { value, selection } = elementState;
-        const [from, to] = selection;
-        return {
-            elementState,
-            data: !value.includes(separator) || value.slice(from, to + 1).includes(separator)
-                ? data
-                : data.replace(new RegExp(`\\${separator}`), ''),
-        };
-    };
-}
-/**
- * Удаляет лишние нули в начале целой части.
- * @example 0,|00005 => Backspace => |5
- * @example -0,|00005 => Backspace => -|5
- * @example "000000" => 0|
- * @example 0| => Type "5" => 5|
- */
-function createLeadingZeroesValidationPostprocessor(separator) {
-    const trimLeadingZeroes = (value) => value
-        .replace(new RegExp('^(\\D+)?0+(?=0)'), '$1')
-        .replace(new RegExp('^(\\D+)?0+(?=[1-9])'), '$1');
-    const countTrimmedZeroesBefore = (value, index) => {
-        const valueBefore = value.slice(0, index);
-        const followedByZero = value.slice(index).startsWith('0');
-        return (valueBefore.length - trimLeadingZeroes(valueBefore).length + (followedByZero ? 1 : 0));
-    };
-    return ({ value, selection }) => {
-        const [from, to] = selection;
-        const hasSeparator = value.includes(separator);
-        const [integerPart, decimalPart = ''] = value.split(separator);
-        const zeroTrimmedIntegerPart = trimLeadingZeroes(integerPart);
-        if (integerPart === zeroTrimmedIntegerPart) {
-            return { value, selection };
-        }
-        const newFrom = from - countTrimmedZeroesBefore(value, from);
-        const newTo = to - countTrimmedZeroesBefore(value, to);
-        return {
-            value: zeroTrimmedIntegerPart + (hasSeparator ? separator : '') + decimalPart,
-            selection: [Math.max(newFrom, 0), Math.max(newTo, 0)],
-        };
-    };
-}
-/**
- * Валидирует значение с учетом min max значений.
- * Работает совместно с createMinMaxPlugin
- */
-function createMinMaxPostprocessor({ min, max, separator, }) {
-    return ({ value, selection }) => {
-        const parsedNumber = parseNumber(value);
-        const limitedValue = 
-        /**
-         * Здесь невозможно ограничить нижнюю границу, если пользователь вводит положительное число.
-         * То же самое для верхней границы и отрицательного числа.
-         * Если min=5, то без этого условия не получится ввести 40, похожая ситуация и с отрицательным max
-         */
-        parsedNumber > 0 ? Math.min(parsedNumber, max) : Math.max(parsedNumber, min);
-        if (!Number.isNaN(parsedNumber) && limitedValue !== parsedNumber) {
-            const newValue = `${limitedValue}`.replace('.', separator);
-            return {
-                value: newValue,
-                selection: [newValue.length, newValue.length],
-            };
-        }
-        return {
-            value,
-            selection,
-        };
-    };
-}
-function createMinMaxPlugin({ min, max }) {
-    return (element, options) => {
-        const listener = () => {
-            const parsedNumber = parseNumber(element.value);
-            const clampedNumber = fnUtils.clamp(parsedNumber, min, max);
-            if (!Number.isNaN(parsedNumber) && parsedNumber !== clampedNumber) {
-                element.value = maskitoTransform(stringifyNumberWithoutExp(clampedNumber), options);
-                element.dispatchEvent(new Event('input', { bubbles: true }));
-            }
-        };
-        const evListenerOptions = { capture: true };
-        element.addEventListener('blur', listener, evListenerOptions);
-        return () => element.removeEventListener('blur', listener, evListenerOptions);
-    };
-}
-function createNotEmptyPartsPlugin(separator) {
-    return (element) => {
-        const listener = () => {
-            const newValue = element.value
-                // 0,9000000 -> 0,9
-                .replace(new RegExp(`(\\${separator}\\d*?)(0+$)`), '$1')
-                // ,2 => 0,2
-                .replace(new RegExp(`^(\\D+)?\\${separator}`), `$10${separator}`)
-                // 0, -> 0
-                .replace(new RegExp(`\\${separator}$`), '')
-                // -0 -> 0
-                .replace(new RegExp(`^${MINUS_SIGN}0$`), '0')
-                // - -> ''
-                .replace(new RegExp(`^${MINUS_SIGN}$`), '');
-            if (newValue !== element.value) {
-                element.value = newValue;
-                element.dispatchEvent(new Event('input', { bubbles: true }));
-            }
-        };
-        const evListenerOptions = { capture: true };
-        element.addEventListener('blur', listener, evListenerOptions);
-        return () => element.removeEventListener('blur', listener, evListenerOptions);
-    };
-}
-function getNumberInputTestIds(dataTestId) {
-    return {
-        input: dataTestId,
-        inputWrapper: getDataTestId(dataTestId, 'form-control'),
-        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
-        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
-        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
-        error: getDataTestId(dataTestId, 'form-control-error-message'),
-        hint: getDataTestId(dataTestId, 'form-control-hint'),
-        decrementButton: getDataTestId(dataTestId, 'decrement-button'),
-        incrementButton: getDataTestId(dataTestId, 'increment-button'),
-    };
-}
-
-export { MAX_DIGITS, MAX_SAFE_INTEGER, MINUS_SIGN, MIN_SAFE_INTEGER, SEPARATORS, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds, parseNumber, stringifyNumberWithoutExp };

package/pagination/moderncssm/Component.d.ts

@@ -1,41 +0,0 @@
-import { FC } from 'react';
-type PaginationProps = {
-    /**
-     * Текущая страница (с нуля)
-     */
-    currentPageIndex: number;
-    /**
-     * Количество страниц
-     */
-    pagesCount: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Скрывает стрелки, если выбрана первая или последняя страница
-     */
-    hideArrows?: boolean;
-    /**
-     * Количество видимых страниц по бокам
-     */
-    sidePadding?: number;
-    /**
-     * Количество видимых страниц вокруг выбранной
-     */
-    activePadding?: number;
-    /**
-     * Режим пагинации
-     */
-    view?: 'default' | 'per-page';
-    /**
-     * Обработчик переключения страницы
-     */
-    onPageChange?: (pageIndex: number) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Pagination: FC<PaginationProps>;
-export { PaginationProps, Pagination };

package/pagination/moderncssm/Component.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
-import { ChevronForwardMIcon } from '@alfalab/icons-glyph/ChevronForwardMIcon';
-import { DefaultView } from './components/default-view/index.js';
-import { PerPageView } from './components/per-page-view/index.js';
-import { Tag } from './components/tag/index.js';
-import styles from './index.module.css';
-import './components/default-view/index.module.css';
-import './components/per-page-view/index.module.css';
-import '../../tag/moderncssm/desktop';
-import './components/tag/index.module.css';
-
-const Pagination = ({ currentPageIndex = 0, pagesCount, className, sidePadding = 1, activePadding = 2, hideArrows = true, view = 'default', onPageChange = () => null, dataTestId, }) => {
-    const handlePageClick = (pageIndex) => {
-        onPageChange(pageIndex);
-    };
-    const handleNextPageClick = () => {
-        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
-    };
-    const handlePrevPageClick = () => {
-        handlePageClick(Math.max(0, currentPageIndex - 1));
-    };
-    const shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
-    const shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
-    const viewClassName = view === 'default' ? 'defaultView' : view;
-    return (React.createElement("div", { className: cn(styles.component, className, styles[viewClassName]), "data-test-id": dataTestId },
-        shouldRenderPrevArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React.createElement(ChevronBackMIcon, { width: 16, height: 16 }) })),
-        view === 'default' && (React.createElement(DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
-        view === 'per-page' && (React.createElement(PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
-        shouldRenderNextArrow && (React.createElement(Tag, { className: styles.arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React.createElement(ChevronForwardMIcon, { width: 16, height: 16 }) }))));
-};
-
-export { Pagination };

package/pagination/moderncssm/components/default-view/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { PaginationProps } from "../../Component";
-type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
-declare const DefaultView: FC<DefaultViewProps>;
-export { DefaultView };

package/pagination/moderncssm/components/default-view/index.js

@@ -1,47 +0,0 @@
-import React, { useCallback } from 'react';
-import { Tag } from '../tag/index.js';
-import styles from './index.module.css';
-import 'classnames';
-import '../../../../tag/moderncssm/desktop';
-import '../tag/index.module.css';
-
-/* eslint-disable react/no-array-index-key */
-const DefaultView = ({ sidePadding = 2, activePadding = 1, pagesCount, currentPageIndex, onPageChange = () => null, }) => {
-    const maxHalfCount = sidePadding + activePadding + 1;
-    const maxElementsCount = maxHalfCount * 2 + 1;
-    const itemsFit = pagesCount <= maxElementsCount;
-    const elementsCount = itemsFit ? pagesCount : maxElementsCount;
-    const getPageIndex = useCallback((elementIndex) => {
-        const lastIndex = pagesCount - 1;
-        const reverseIndex = lastIndex - currentPageIndex;
-        const lastElementIndex = elementsCount - 1;
-        const reverseElementIndex = lastElementIndex - elementIndex;
-        const hasCollapsedItems = (index) => !itemsFit && index >= maxHalfCount;
-        if (elementIndex < sidePadding) {
-            return elementIndex;
-        }
-        if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
-            return null;
-        }
-        if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
-            return null;
-        }
-        if (reverseElementIndex < sidePadding) {
-            return lastIndex - reverseElementIndex;
-        }
-        const computedIndex = currentPageIndex - maxHalfCount + elementIndex;
-        return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
-    }, [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding]);
-    return (React.createElement(React.Fragment, null, Array(elementsCount)
-        .fill('')
-        .map((_, i) => {
-        const pageIndex = getPageIndex(i);
-        if (pageIndex === null) {
-            return (React.createElement("div", { key: i.toString(), className: styles.dots }, "..."));
-        }
-        const active = currentPageIndex === pageIndex;
-        return (React.createElement(Tag, { key: i.toString(), checked: active, disabled: active, onClick: () => onPageChange(pageIndex) }, pageIndex + 1));
-    })));
-};
-
-export { DefaultView };

package/pagination/moderncssm/components/default-view/index.module.css

@@ -1,12 +0,0 @@
-/* */
-
-.dots {
-    width: 32px;
-    height: 32px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-light-text-secondary);
-    cursor: default;
-}

package/pagination/moderncssm/components/per-page-view/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { PaginationProps } from "../../Component";
-type PerPageViewProps = Pick<PaginationProps, 'pagesCount' | 'currentPageIndex'>;
-declare const PerPageView: FC<PerPageViewProps>;
-export { PerPageView };

package/pagination/moderncssm/components/per-page-view/index.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import styles from './index.module.css';
-
-const PerPageView = ({ pagesCount, currentPageIndex }) => (React.createElement("span", { className: styles.component },
-    currentPageIndex + 1,
-    " \u0438\u0437 ",
-    pagesCount,
-    " \u0441\u0442\u0440\u0430\u043D\u0438\u0446"));
-
-export { PerPageView };

package/pagination/moderncssm/components/per-page-view/index.module.css

@@ -1,6 +0,0 @@
-/* */
-
-.component {
-    display: block;
-    margin: 0 var(--gap-m);
-}

package/pagination/moderncssm/components/tag/index.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { TagDesktopProps as TagProps } from "../../../../tag/desktop";
-declare const Tag: FC<TagProps>;
-export { Tag };

package/pagination/moderncssm/components/tag/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { TagDesktop } from '../../../../tag/moderncssm/desktop';
-import styles from './index.module.css';
-
-const Tag = ({ className, checked, ...restProps }) => (React.createElement(TagDesktop, { ...restProps, checked: checked, size: 'xxs', className: cn(className, styles.tag, { [styles.checked]: checked }) }));
-
-export { Tag };

package/pagination/moderncssm/components/tag/index.module.css

@@ -1,40 +0,0 @@
-/* */
-
-button.tag.tag {
-    color: var(--color-light-text-secondary);
-    border-radius: var(--border-radius-m);
-    border: none;
-    flex-shrink: 0;
-    min-width: auto;
-    min-height: auto;
-    width: 32px;
-    height: 32px;
-    padding: 0
-}
-
-button.tag.tag:disabled:not(.checked) {
-        opacity: 0.3;
-    }
-
-button.tag.tag:hover:not(:disabled) {
-        background-color: var(--color-light-transparent-default-hover);
-        color: var(--color-light-text-primary);
-    }
-
-button.tag.tag:active:not(:disabled) {
-        background-color: var(--color-light-transparent-default-press);
-    }
-
-button.tag.tag.checked {
-        cursor: default;
-        background-color: var(--color-light-accent-secondary);
-        color: var(--color-light-text-primary-inverted);
-    }
-
-button.tag.tag.checked:hover:not(:disabled) {
-        color: var(--color-light-text-primary-inverted);
-    }
-
-button.tag.tag.checked:active:not(:disabled) {
-        color: var(--color-light-text-primary);
-    }

package/pagination/moderncssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/pagination/moderncssm/index.js

@@ -1,13 +0,0 @@
-export { Pagination } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronBackMIcon';
-import '@alfalab/icons-glyph/ChevronForwardMIcon';
-import './components/default-view/index.js';
-import './components/tag/index.js';
-import '../../tag/moderncssm/desktop';
-import './components/tag/index.module.css';
-import './components/default-view/index.module.css';
-import './components/per-page-view/index.js';
-import './components/per-page-view/index.module.css';
-import './index.module.css';

package/pagination/moderncssm/index.module.css

@@ -1,21 +0,0 @@
-/* */
-
-.component {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-
-    display: flex;
-    align-items: center;
-    color: var(--color-light-text-primary);
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-}
-
-.defaultView > * {
-        margin-right: var(--gap-xs)
-    }
-
-.defaultView > *:last-child {
-            margin-right: 0;
-        }

package/pass-code/moderncssm/Component.d.ts

@@ -1,66 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-import { PassCodeProps } from "./typings";
-type BasePassCodeProps = {
-    /**
-     * Код
-     */
-    value: string;
-    /**
-     * Обработчик изменения кода
-     */
-    onChange: (code: string) => void;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Отображение ошибки ввода
-     */
-    error?: boolean;
-    /**
-     * Отображение успешного ввода
-     */
-    success?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Заголовок для правого слота
-     */
-    rightAddonsTitle?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для враппера используется модификатор -wrapper, ошибки -error,
-     * сообщения над клавиатурой -message, блока с кодом -input-progress,
-     * блока с цифрами -keypad
-     */
-    dataTestId?: string;
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
-    /**
-     * Значение по-умолчанию для хука useMatchMedia
-     */
-    defaultMatchMediaValue?: boolean | (() => boolean);
-    /**
-     * Стили компонента
-     */
-    styles?: {
-        [key: string]: string;
-    };
-    /**
-     * Отключает ввод и удаление кода
-     */
-    disabled?: boolean;
-};
-declare const PassCode: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
-export { BasePassCodeProps, PassCode };