import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import AnimatedContainer from '../atoms/AnimatedContainer.mjs';
import { chromaticIgnoreClassName } from '../atoms/chromaticIgnoreClassName.mjs';
import Column from '../atoms/Column.mjs';
import LoadingBar from '../atoms/LoadingBar.mjs';
import Typography from '../atoms/Typography.mjs';
import ErrorText from './ErrorText.mjs';
import modules_929e05ad from './OTPEntry.module.css.mjs';
import OtpInput from './OtpInput.mjs';
import TextColumn from './TextColumn.mjs';

const OTPEntry = ({ header, helperContent, instruction, isSubmitting, onSubmit, errorMessage })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(TextColumn, {
        header: header,
        body: instruction
    }), /*#__PURE__*/ React__default.createElement(Column, {
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(Column, null, /*#__PURE__*/ React__default.createElement(OtpInput, {
        onSubmit: onSubmit,
        disabled: isSubmitting
    }), /*#__PURE__*/ React__default.createElement(AnimatedContainer, {
        isOpen: isSubmitting
    }, /*#__PURE__*/ React__default.createElement(Column, {
        className: modules_929e05ad.progressInner,
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "helper"
    }, $__i18n._({
        id: "formField.passcode.status.verifying",
        message: "Verifying passcode..."
    })), /*#__PURE__*/ React__default.createElement(LoadingBar, {
        isLoading: isSubmitting
    })))), /*#__PURE__*/ React__default.createElement(Column, null, !isSubmitting && errorMessage && /*#__PURE__*/ React__default.createElement(ErrorText, null, errorMessage), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "helper",
        className: chromaticIgnoreClassName()
    }, helperContent))));
};

export { OTPEntry as default };
//# sourceMappingURL=OTPEntry.mjs.map
