"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeInput = void 0;
const react_1 = __importDefault(require("react"));
const react_verification_code_input_1 = __importDefault(require("react-verification-code-input"));
const styled_components_1 = __importDefault(require("styled-components"));
const theme_1 = require("../../styles/theme");
const ReactCodeComponent = (styledProps) => (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
react_1.default.createElement(react_verification_code_input_1.default, Object.assign({}, styledProps)));
exports.CodeInput = styled_components_1.default(ReactCodeComponent) `
  width: auto !important;

  input {
    font-size: ${theme_1.theme.fontSizes[4]} !important;
    font-family: ${theme_1.theme.fontFamilies.baseText} !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid
      ${(props) => props.invalid ? theme_1.theme.colors.red[0] : theme_1.theme.colors.gray[3]} !important;
    background-color: ${theme_1.theme.colors.white} !important;
    color: ${theme_1.theme.colors.gray[1]} !important;
    margin-right: ${(props) => props.spacing}px;

    &:last-child {
      margin-right: 0;
    }
  }
`;
//# sourceMappingURL=styles.js.map