import { Button, Heading, List, Paragraph } from '../../../01-atoms';
export function StepFour({ onFinish }) {
    return (<div className="flex w-96 flex-col items-center">
      <Heading className="mb-2" level="h7">
        Configuración exitosa
      </Heading>

      <Paragraph className="my-4" size="body-2">
        Tu autenticación de dos factores ha sido activada correctamente.
      </Paragraph>

      <div className="border-gray-3 mb-4 rounded-lg border p-4">
        <Heading className="mb-4 text-start" level="h7">
          Pasos para iniciar sesión
        </Heading>

        <List orientation="vertical" className="list-disc pl-4">
          <li>
            <Paragraph size="body-2">
              Inicia sesión con tu usuario y contraseña.
            </Paragraph>
          </li>
          <li>
            <Paragraph size="body-2">
              Ingresa el código de 6 dígitos de tu Authenticator.
            </Paragraph>
          </li>
          <li>
            <Paragraph size="body-2">Accede a la plataforma </Paragraph>
          </li>
        </List>
      </div>

      <Button modifier="principal" className="w-[80%]" onClick={onFinish}>
        Iniciar sesión
      </Button>
    </div>);
}
//# sourceMappingURL=StepFour.jsx.map